React使用展开运算符报非可迭代实例错误如何解决？

错误根本原因 #

• 核心问题是你混淆了Ant Design Select组件onChange回调的参数顺序：antd Select的onChange触发时，第一个参数是选中的value值，第二个参数才是对应的option对象。你代码里把参数顺序写反后，在回调函数里取val.value拿到的是undefined，后续逻辑错误修改了data状态的类型，把原本的数组改成了非可迭代类型（比如undefined、普通对象），所以执行[...data]展开的时候触发了非可迭代实例的报错。
• 次要问题是你遍历数组的时候用了map但没有返回值，属于不合理用法，遍历操作应该用forEach更符合语义。

最优修复方案 #

1. 首先修正Select组件的onChange参数传递，调整回调函数的取值逻辑，直接用第一个参数作为选中值即可，不需要再取.value。
2. 把无返回值的map遍历替换为forEach，同时可以给data加兜底逻辑避免极端情况报错。

修正后的核心代码示例 #

// 修正onChangeHandler1
const onChangeHandler1 = (selectedValue) => {
  // 加兜底，避免data意外变成非数组时报错
  const updating = [...(data || [])];
  data.forEach((d, i) => {
    if (d.id === selectedValue) {
      updating[i] = {
        ...d,
        disabled: true
      };
    }
    if (option1) {
      if (d.id === option1) {
        updating[i] = {
          ...d,
          disabled: false
        };
      }
    }
  });
  setOption1(selectedValue);
  setData(updating);
};

// 同理修正onChangeHandler2
const onChangeHandler2 = (selectedValue) => {
  const updating = [...(data || [])];
  data.forEach((d, i) => {
    if (d.id === selectedValue) {
      updating[i] = {
        ...d,
        disabled: true
      };
    }
    if (option2) {
      if (d.id === option2) {
        updating[i] = {
          ...d,
          disabled: false
        };
      }
    }
  });
  setOption2(selectedValue);
  setData(updating);
};

// Select组件的onChange不需要传多余参数，直接绑定函数即可
return (
  <>
    <h2>Data 1</h2>
    <Select
      onChange={onChangeHandler1}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={data
        .filter((d) => !d.disabled)
        .map((item) => ({
          value: item.id,
          label: item.name
        }))}
      bordered={false}
    />
    <br />
    <h2>Data 2</h2>
    <Select
      onChange={onChangeHandler2}
      placeholder="Select any one"
      style={{ width: 120 }}
      options={data
        .filter((d) => !d.disabled)
        .map((item) => ({
          value: item.id,
          label: item.name
        }))}
      bordered={false}
    />
  </>
);

修复后就不会再出现展开数组的报错，两个Select联动禁用选中项的逻辑也可以正常运行。

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