收到错误为“传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须具有 [Symbol.iterator]() 方法'答案

【问题标题】：Getting error as 'Invalid attempt to spread non-iterable instance. In order to be iterable, non-array objects must have a [Symbol.iterator]() method'收到错误为“传播不可迭代实例的无效尝试。为了可迭代，非数组对象必须具有 [Symbol.iterator]() 方法'
【发布时间】：2021-11-02 07:58:11
【问题描述】：

在 React 项目中，当我尝试使用扩展运算符将常量分配给数组对象时，会显示上述错误。为了避免错误，需要进行哪些更改？我也遇到过类似的错误，但没有一个有用。

以下是参考代码

对象数组数据

const newData = [
    {
      id: 123,
      name: "Vijay"
    },
    {
      id: 345,
      name: "Sanket"
    },
    {
      id: 546,
      name: "Hitesh"
    },
    {
      id: 789,
      name: "Sameer"
    },
    {
      id: 421,
      name: "Akshay"
    }
  ];

其余代码

const updatedData = newData.map((data) => {
    return {
      ...data,
      disabled: false
    };
  });

  const [data, setData] = React.useState(updatedData);
  const [option1, setOption1] = React.useState();
  const [option2, setOption2] = React.useState();

  const onChangeHandler1 = (key, val) => {
    console.log("VAL", val, "KEY");

    const updating = [...data]; //Here the error persists
    data.map((d, i) => {
      if (d.id === val.value) {
        updating[i] = {
          ...d,
          disabled: true
        };
      }
      if (option1) {
        if (d.id === option1) {
          updating[i] = {
            ...d,
            disabled: false
          };
        }
      }
    });
    setOption1(val.value);
    setData(updating);
  };

  const onChangeHandler2 = (key, val) => {
    console.log("VAL", val, "KEY", key);

    const updating = [...data]; //Same error persists here too
    data.map((d, i) => {
      if (d.id === val.value) {
        updating[i] = {
          ...d,
          disabled: true
        };
      }
      if (option2) {
        if (d.id === option2) {
          updating[i] = {
            ...d,
            disabled: false
          };
        }
      }
    });
    setOption2(val.value);
    setData(updating);
  };

  return (
    <>
      <h2>Data 1</h2>
      <Select
        onChange={(key, val) => onChangeHandler1(key, val)}
        placeholder="Select any one"
        style={{ width: 120 }}
        options={data
          .filter((d) => d.disabled === false)
          .map((_) => {
            // console.log(_)
            return {
              value: _.id,
              label: _.name
            };
          })}
        bordered={false}
      />
      <br />
      <h2>Data 2</h2>
      <Select
        onChange={(key, val) => onChangeHandler2(key, val)}
        placeholder="Select any one"
        style={{ width: 120 }}
        options={data
          .filter((d) => d.disabled === false)
          .map((_) => {
            // console.log(_)
            return {
              value: _.id,
              label: _.name
            };
          })}
        bordered={false}
      />
    </>
  );
};

如上所述，在Line const updating = [...data]时出现错误触发，选择任何选项时。最好的最优解是什么？请不要在这里'antd'库用于设计框架。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

将此行 const updating = [...data] 设为 const updating = data。希望您的问题能得到解决

【讨论】：