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

Question

In a React project, when I try to assign a constant to array object using spread operator, the above error is displayed. What are the required changes to be made in order to avoid the errors? I have gone through similar errors but, none are useful.

Following is the code for reference

1. Object array data

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

2. Rest of the code

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}
      />
    </>
  );
};

As seen above the error triggers at line const updating = [...data] , when any option is selected. What is the best optimal solution? Please not here 'antd' library is used for design framework.

Answer 1

make this line const updating = [...data] as this const updating = data . Hope your problem will be solved