如何填充复杂的反应状态？答案

【问题标题】：How to populate a complex react state?如何填充复杂的反应状态？
【发布时间】：2021-03-24 11:51:00
【问题描述】：

   const [content, setContent] = useState([
    {main: '', li:[''] },
  ]);

我正在寻找一种将新项目添加到 content.li 的方法？我已经尝试使用

Array.push('new')

但是失败了。这是一种动态形式，输入量可变。

【问题讨论】：

标签： javascript reactjs forms dynamic

【解决方案1】：

你可以这样添加：

const [content, setContent] = useState([
    {main: '', li:[''] },
  ]);

setContent([...content,"new" as any])

【讨论】：

【解决方案2】：

欢迎来到论坛。对对象或数组的任何这些修改都是有效的，只要它们应用于内容克隆，而不是内容本身。

如果您对原始内容应用更改，您将直接改变状态，这是一种反模式。其次，数组和对象是基于引用的。当你改变内部的东西和数组/对象时，你并没有改变它的引用（内存中它所在对象的地址）。

react 不会深入查看对象以检查发生了什么变化，而是进行浅层验证。数组内容可能不同，但由于引用相同，setContent(content) 会认为content 状态相同，不会执行状态更新。

这样，每次处理数组/对象时都需要克隆它。扩展运算符是一种流行的方式（鉴于其更简洁的语法）来实现这一点：

  const nextContent = [...content] // content copy
  const item = nextContent[i] // i given object index to update
  const li = [ ...item.li, 'new' ] // new li
  const nextItem = { ...item, li } // object with updated Item
  nextContent[i] = nextItem
  setContent(nextContent)

上面将创建一个具有不同引用的新数组。它将内容值传播到其中。然后将以下值（'new'）添加到所需的li。鉴于它是一个新的参考，setContent 将按预期工作。

【讨论】：

我不想更新我的内容。我想要的是 content.li，内容对象内的数组。如果你知道如何请帮助
好的，更新了特定 li 更新的答案。