Question

我为此问题准备了Codesandbox example。

我有一个对象数组，在“我的应用程序”函数中名为webItem，并将webItem作为属性传递给CreateWeb对话框窗口函数。

我在这里将webItem属性指定为网络，如果我更改了此变量的任何值，原来的webItem也将更改。

我不明白为什么会这样吗？

我什至做一个Object.assign，但是结果是一样的。

请帮助我...

Answer 1

这就是JavaScript的工作方式。您正在制作 array 的新副本，但它仍包含对 objects 的引用。在setWebItem中，您正在对一个对象进行突变，因此这些更改会在所有地方得到反映。

要解决眼前的问题，您只需要返回一个新对象而不是修改旧对象（我对TypeScript签名进行了一些更改以使其更加类型安全）：

const setWebItem = (type: keyof WebItem, event: React.ChangeEvent<HTMLInputElement>) => {
  const newWeb: WebItem = {
    ...web[index],
    [type]: event.target.value,
  };

  setWeb([
    ...web.slice(0, index),
    newWeb,
    ...web.slice(index + 1, web.length),
  ]);

  event.preventDefault();
};

为什么要更改只读属性值？

1 个答案: