使用react-select2-wrapper时修改数据数组后Select2不更新

你遇到的核心问题是React的浅比较机制导致Select2组件未检测到state变化，进而没有触发重新渲染。下面拆解原因和修复方法：

为什么会出现这个问题？ #

你在updateResolutionText里直接修改了原resolutionOptions数组的元素：

let options = this.state.resolutionOptions;
options[0].text = basisList[i].text

这里的options只是原state数组的引用，你修改了数组内部的元素，但数组本身的引用并没有改变。React更新组件时会对新旧state做浅比较，发现resolutionOptions的引用和之前一致，就会判定这个state没有变化，不会触发组件重渲染——所以Select2自然不会更新显示内容。

修复方法：创建新的数组副本 #

你需要修改updateResolutionText，确保每次更新时都生成一个新的数组（而非直接修改原数组）。可以用ES6展开运算符或slice()复制数组，再修改新数组的元素：

updateResolutionText() {
  let basisList = [
    {text: 'Users (ID)', id: 0, value: 'users'},
    {text: 'Machines', id: 1, value: 'machines'}
  ];
  // 复制原数组及内部对象，避免修改原state引用
  let options = [...this.state.resolutionOptions].map(opt => ({...opt}));
  // 这里替换为你实际选中的basisList的value，比如从state/props中获取
  let comparison = 'users';
  if(basisList) {
    const matchedBasis = basisList.find(item => item.value === comparison);
    if(matchedBasis) {
      options[0].text = matchedBasis.text;
    }
  }
  this.setState({ resolutionOptions: options });
}

更推荐用函数式setState（依赖之前的state时更安全，避免异步更新的冲突）：

updateResolutionText() {
  let basisList = [
    {text: 'Users (ID)', id: 0, value: 'users'},
    {text: 'Machines', id: 1, value: 'machines'}
  ];
  // 替换为实际选中的basisList值
  let comparison = 'users';
  this.setState(prevState => {
    const newOptions = prevState.resolutionOptions.map(opt => ({...opt}));
    const matchedBasis = basisList.find(item => item.value === comparison);
    if(matchedBasis) {
      newOptions[0].text = matchedBasis.text;
    }
    return { resolutionOptions: newOptions };
  });
}

额外注意点 #

• 如果你是通过用户切换basisList触发更新，记得把comparison的值改成当前选中项的value（比如从组件state/props中动态获取，而非硬编码）。
• 如果修改后仍有问题，可以给Select2组件添加key属性，比如key={this.state.resolutionOptions[0].text}，强制React在文本变化时重新创建组件实例。

内容的提问来源于stack exchange，提问作者CWSites