更新反应状态数组时的更新元素答案

【问题标题】：Update element on updating react state array更新反应状态数组时的更新元素
【发布时间】：2022-02-12 02:12:22
【问题描述】：

我对使用 React.useState() 更新元素感到困惑我正在创建动态计算器，您可以在其中添加字段，因此我不能为每个类别的结果使用一个状态，因此我创建了一个包含类别 ID 的结果的对象，并且可以在其中添加类别。 let [results, setResults] = React.useState({}); 然后每次用户添加产品时

for (const category of product.categories) {
  results[category.id] = 0;

当我更新某个类别的结果时，它会被更新：

setResults(newResults => {
  newResults[categoryId] = mult * sum * quantity;
  return newResults;
})

但我在表格中的元素一直显示为零（初始值）<TableCell align="right"><p>{results[category.id]}</p></TableCell>

更新：这里是完整代码：https://pastebin.com/cbJzFC8t Page looks like this

【问题讨论】：

你能不能把代码显示得更难理解一点。
我怀疑问题是你必须完全创建新对象，因为 React 使用引用比较，newResults 没有区别。尝试将您的退货替换为：return { ...newResults }。如果可行，我会写出正确的答案并附上详细的解释。
刚刚替换为return { ...newResults };。仍然没有元素更新

标签： reactjs next.js

【解决方案1】：

你需要定义一个新变量

setResults(oldResults=> {
  let newResults = oldResults[categoryId]
  newResults = mult * sum * quantity;
  return newResults;
})

【讨论】：

不幸的是，这没有帮助，结果已更新但元素没有。