React - 更新状态（对象数组）。我需要深度复制数组吗？

Question

我有以下state：

const[images,setImages] = useState([
  {src: 'stringSRC1', selected: false},
  {src: 'stringSRC2', selected: false},
  {src: 'stringSRC3', selected: false}
]);

我正在使用以下代码更新它（切换选定状态）：

function handleImageClick(index) {
  props.setImages((prevState)=>{
    const aux = Array.from(prevState);
    aux[index].selected = !aux[index].selected;
    return aux;
  });
}

它按预期工作。但我想到了一件事。

当我从 prevState 复制数组时，我正在创建一个新数组，但对象（存储为引用）将保持不变。我已经测试过，它们确实如此像这样复制数组时不会改变。

问题

这是一种不好的做法吗？我是否应该费心深度复制数组，例如创建一个新数组并创建全新的对象？还是这样就好了？

Answer 1

TL;DR - 您仍然需要进行深拷贝。

official docs 推荐深拷贝：

State 可以保存任何类型的 JavaScript 值，包括对象。但是你不应该直接改变你在 React 状态下持有的对象。相反，当您想要更新一个对象时，您需要创建一个新对象（或复制现有对象），然后设置状态以使用该副本。

他们还建议使您的状态对象尽可能平坦，以便更轻松地进行深度复制，如果这不是一个选项，请使用 immer 之类的东西来为您处理深度复制。

如果您的状态嵌套很深，您可能需要考虑将其展平。但是，如果你不想改变你的状态结构，你可能更喜欢嵌套传播的快捷方式。 Immer 是一个流行的库，可让您使用方便但可变的语法进行编写，并负责为您生成副本。

Answer 2

不，它应该是这样工作的。是的，对象没有改变，但重要的是数组发生了变化。当事情发生变化时，React 会在 DOM 和虚拟 DOM 之间进行浅层比较。一旦你的新数组与旧数组进行比较，就会检测到更改，数组本身的内容并不重要。

Answer 3

是的，如果你想避免副作用，你必须进行深度克隆。

在你的函数中：

function handleImageClick(index) {
  props.setImages((prevState)=>{
    const aux = Array.from(prevState);
    aux[index].selected = !aux[index].selected;
    return aux;
  });
}

当您使用 Array.from 时，您将获得对存储对象的引用，因此您的 prevState 被修改。

看这个：

setTest(prevState => {
      console.log("PrevState", prevState);
      const b = Array.from(prevState);
      b[0].a = b[0].a + 1;
      return b;
    });

你可以在这里测试它：

https://codesandbox.io/embed/exciting-mcnulty-6spdh?fontsize=14

您将看到 prevState 具有下一个值，因此您丢失了 prevState 值。

假设您想在代码中执行此操作：

function handleImageClick(index) {
      props.setImages((prevState)=>{
        const aux = Array.from(prevState);
        aux[index].selected = !aux[index].selected;
        aux[index + 1].selected = prevState[index].selected;
        return aux;
      });
    }

aux[index + 1].selected = prevState[index].selected; 坏了！！

所以你需要对数组进行深拷贝以避免这种事情。

你可以这样做：const aux = JSON.parse(JSON.stringify(prevState));