17.react相同组件切换时,重新创建组件

160 阅读1分钟

react点击相同组件切换时,数据更新了,但是选中的值没有回显,如果关闭组件在打开就可以正确渲染,解决的方案就是需要重新创建组件,渲染组件

来回点击时,数据回显组件的默认值不限,没有回显父组件传给子组件的值,下图是错误的回显

image.png

下图才是正确的回显

image.png

解决方案:

添加key,react会检测到不同的key值会重新渲染组件,从而正确的回显数据

    <FilterPicker
            key={openType}
            onCancel={this.onCancel}
            onSave={this.onSave}
            data={data}
            cols={cols}
            type={openType}
            defaultValue={defaultValue}
          />