当输入值更改时，如何更新嵌套数组中的对象？答案

【问题标题】：How can I update an object in a nested array when an input value changes?当输入值更改时，如何更新嵌套数组中的对象？
【发布时间】：2020-10-15 21:26:40
【问题描述】：

我有一个文章列表，每个文章都有一些练习，每个练习都有一个持续时间属性。持续时间属性是可编辑的，但我似乎无法弄清楚如何更新它，以便它在我的原始数组中生效。

我在 CodeSandbox 中设置了 basic example。

预期的行为是在更改其中一个输入字段时，它应该在我的文章数组（位于 App.js 中）中更新

我正在尝试：onChange={(e) => setDuration(e.target.value)}

在我看来，问题是 React 不喜欢你改变当前状态，所以我必须创建一个新状态......所以这个“新”持续时间应该以某种方式传播到 App.js ?或者是在 App.js 中有一个方法来传递所有组件以更新原始数组的解决方案？

任何建议将不胜感激:)

【问题讨论】：

请在您的问题中提供更多代码。链接到它是不够的。
问题是，你正在更新子组件的状态，它最终会经历重新渲染周期，而不是父组件，因为重新渲染只是自上而下而不是自下而上，所以父母的状态没有改变，因此，您看不到数组中的任何变化

【解决方案1】：

改变应用本身的状态并不会改变应用接收到的对象。

您需要手动更改对象

尝试添加：

const onChange = (e)=>{
    exercise.duration = e.target.value;
    setDuration(e.target.value)
}

并改变你的 onChange={(e) => setDuration(e.target.value)}

到：

onChange={onChange}

注意：这不会导致父级重新渲染。

【讨论】：

这似乎仍然没有改变 App.js 中的数组？它在组件中发生了变化，但在 App.js 中似乎仍然没有生效 -> codesandbox.io/s/hungry-payne-3d86j?file=/src/EditDuration.js
更新：这似乎仍然没有改变 App.js 中的数组？它在组件中发生了变化，但它似乎仍然没有在 App.js 中生效 - > codesandbox.io/s/hungry-payne-3d86j?file=/src/EditDuration.js - 为什么？如果我在 App.js 中添加一个保存按钮并注销文章，我可以看到数组发生了变化，但是在 DOM 中输出数组时它并没有反映在 App.js 中，如果我想要 App 怎么办.js 在更改每个组件的持续时间时重新渲染？
因为它没有重新渲染，如果你想让它重新渲染，你可以将一个 setState 函数传递给一个孩子，并在那里调用它。