antd 中 select 组件更新问题

Question

问题描述较困难

我写了一段代码，请大佬帮忙看一下

https://codesandbox.io/embed/...

问题核心:

this.default === selectList[0].default ? (
      <div>
        {selectList.map((item, idx) => (
          <div key={idx}>
            <span> {item.name}</span>
            <Select
              showSearch
              allowClear={item.allowClear}
              disabled={item.disabled}
              optionFilterProp="children"
              defaultValue={item.default}
              filterOption={(input, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(input.toLowerCase()) >= 0
              }
            >
              {item.list.map((item, i) => {
                return (
                  <Option value={item.value} key={i}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </div>
        ))}
      </div>
    ) : (
      <div>
        {selectList.map((item, idx) => (
          <div key={idx}>
            <span> {item.name}</span>
            <Select
              showSearch
              allowClear={item.allowClear}
              disabled={item.disabled}
              optionFilterProp="children"
              defaultValue={item.default}
              filterOption={(input, option) =>
                option.props.children
                  .toLowerCase()
                  .indexOf(input.toLowerCase()) >= 0
              }
            >
              {item.list.map((item, i) => {
                return (
                  <Option value={item.value} key={i}>
                    {item.name}
                  </Option>
                );
              })}
            </Select>
          </div>
        ))}
      </div>
    );
  }

通过设置 this.default 与 selectList[0].default 来控制走哪个 div （两个div是一样的）。

selectList[0].default 更新后，界面并不会更新。这是为什么?

现在的需求是更新 selectList[0].default 后，要更新界面。

Answer 1

代码太长没有细看。
这个问题和 antD 没有关系，问题在于 把 React 当成 angularjs 或者 vue 来用了，前者与后两者不同 ，后两者的数据与视图是双向绑定的，比如使用 vue 搭建的应用里，修改数据就会触发对应视图的更新。
而 React 是单向数据流，交付数据的方法是把数据放到 state 里，渲染的时候再从 state 里读取，数据需要变动的时候，通过 setState 更新 state ，继而触发一个渲染周期。