嵌套数组中的 setState答案

【问题标题】：setState in neasted array嵌套数组中的 setState
【发布时间】：2020-04-08 14:03:25
【问题描述】：

我希望更新特定的输入值，我成功地使用一维数组执行此操作，但不幸的是，在我的情况下 2d 是必要的，我不知道如何执行此操作，因为我已经尝试了行和单元格的所有组合。

这里是演示链接 -> https://codesandbox.io/s/stoic-mirzakhani-46exz?file=/src/App.js

基本上，事情是在第一行输入一些值到例如 X 轴之后，我希望只更新这个字段值。我有一个按钮，可以向 inputValue 添加新行，其中包含所有输入标题和内容。另一件事是，如果我现在向输入写入一些内容，它会将 aray 转换为对象，并且由于该应用程序崩溃

【问题讨论】：

您的目标是创建 chunkingRow 的实例并将它们存储在将生成表的数组中吗？
请检查钩子和设置状态。在这里，您错误地改变了值。原因是您正在访问从闭包返回的值，而不是使用函数来改变包含的值。
我的目标是每个输入都有自己的值，称为“内容”我想修改属于特定输入的内容，基本上每个输入 onChange 都是通过 handleChunkingChange 修改自己
好的，请给我几分钟

标签： reactjs react-hooks

【解决方案1】：

好的，所以你在这里遇到了一些问题，但总的来说这是一个很好的努力！

您试图直接更新状态，而不是使用数组破坏和挂钩提供的变异函数
在状态更新中，您没有正确合并对象，导致传递相同的值
你没有正确使用道具

为了解决这些问题，我制作了一个新的输入组件，用于跟踪其 props 中的每个组件行和列。然后这些值将与 prop Drilled mutation 函数一起使用，并从您的块组件中检索内容值。

如果这不起作用，请告诉我

以下是工作版本的链接，请查看控制台以查看更新，并且有一个按钮也会为您打印 inputValue 的当前值。现在，状态也会在您输入时更新。

编辑：我已经解决了您的评论并修复了示例，使其符合您的要求。我继续使用 useReducer 钩子，因为它使逻辑更容易理解和阅读。如果您想这样做，也可以尝试使用 useState 来解决这个问题。现在，虽然这里又是链接：
https://codesandbox.io/s/prod-resonance-wokey?fontsize=14&hidenavigation=1&theme=dark

【讨论】：

哦，问题似乎比我想象的要复杂，非常感谢您的帮助:) 它可以工作但是对于当前的形状我不能像以前一样在 Chunk 中添加行是像 <button onClick={() => setInputValue((prevInputValute) => [...prevInputValute, chunkingRow]) } > 这样的按钮现在它显示 prevInputValue 不可迭代，我还看到有 tmp[0][row][cell]["content"] = value; 表示已经存在的行。如果我稍后添加其他行，因为这就是能够创建许多行的想法？
我猜想将 inputValue 作为一个对象可能不起作用，因为我将无法再推送行，并且用户可以添加任意数量的行至关重要
哦，好吧，再给我一些时间，我会做出调整。我刚看到这些cmets。
这些更改是否解决了您的顾虑？
whoaa 看起来很复杂但嗯可以理解，我发现问题比我想象的要复杂得多，非常感谢您的时间和帮助！我怀疑我自己能否实现它:) 非常感谢！