将 useState 与对象数组反应答案

【问题标题】：React useState with Array of objects将 useState 与对象数组反应
【发布时间】：2021-03-01 22:32:05
【问题描述】：

所以我有 3 个输入，我想在更新 onChange 输入属性时获取它们的状态，我想获取的状态应该是这样的：[{lang: (inputName), text: (inputValue)}, ..]。

我尝试了什么：

function onChange = (name, value) => {
  setState(prevState => [...prevState, {lang: name, text: value} ])
}

我认为解决方案是过滤 prevState，因为只有 3 个输入，我可以根据 name 键过滤数组。并且只显示具有真正密钥的对象（不重复的）。

【问题讨论】：

您要“获取”还是“更新”？我不确定我是否理解您要执行的操作。
嗯，它是 React（2 路绑定），所以我想获取状态并像显示的那样更新它。
React 不使用双向数据绑定。

标签： javascript arrays reactjs state

【解决方案1】：

很难从您的问题中看出，但我认为您要问的是如何更新数组内对象的“文本”值？

如果是这样，你可以这样做：

function onChange = (name, value) => {
  setState(prevState => {
    let stateCopy = [...prevState];
    const index = stateCopy.findIndex(obj => obj.lang === name);
    stateCopy[index] = {...stateCopy[index], text: value};
    return stateCopy;
  }
}

【讨论】：

这通过直接更新prevState 的嵌套对象上的属性来改变状态。由于您将prevState 传播到一个新数组中以进行返回，因此它很可能不会立即导致任何可见的错误，但它违反了 React 状态的规则，并可能导致未来的错误。
@BrianThompson，是的，好点，我已经更新了答案，先制作新副本，然后再更新。
不幸的是更新仍然有同样的问题。嵌套对象仍然指向状态中的原始引用。您还需要创建一个新的嵌套对象：stateCopy[index] = {...stateCopy[index], text: value};。请注意，将对象/数组传播到新对象/数组只会破坏对根的引用。嵌套引用将保持不变。
没想到只是浅拷贝，值得了解，谢谢