关于antd-react使用Select组件的defaultValue踩坑及解决方案

需求背景：

在有些项目中，使用antd里的Select组件初始化下拉选项之后，我们可能会有多个tab的切换需求，每一次切换都要改变Select组件的下拉选项数据，以及默认选项，但这时候就可能会出现一种情况就是，我们切换了tab之后，下拉选项的数据是更新了，但是输入框里的默认选项却是我们上一个tab里选中的值，而不是我们切换后的tab的默认的值，即下拉框显示的名字永远是上次下拉框选择的名字。

解决方案：

在Select组件里添加一个key，key值可以设置为tab切换的变量（关于这点，官方API文档好像没有提到）。

<Select
      // key不能去掉，类似循环渲染里的key的作用，即告诉react的唯一标示
      key={selectKey}

      showSearch
      value={value}
      placeholder={props.placeholder}
      style={props.style}
      defaultActiveFirstOption={false}
      showArrow={false}
      filterOption={false}
      onSearch={handleSearch}
      onChange={handleChange}
      notFoundContent={null}
      options={(data || []).map((d) => ({
        value: d.value,
        label: d.text,
      }))}
/>

 

参考文档： 

选择器 Select - Ant Design