时间戳

首页 > 解决方案 > React - 更新状态（对象数组）。我需要深度复制数组吗？

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

问题描述

我有以下内容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，我正在创建一个新数组，但对象（存储为引用）将保持不变。我已经测试过，当你像这样复制数组时它们不会改变。

问题

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

标签： javascriptreactjsreact-hooks

解决方案

TL;DR - 您仍然需要制作深层副本。

官方文档建议制作深拷贝：

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

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

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

推荐阅读