创建新对象时使用 React Context API 更新组件答案

【问题标题】：Using React Context API to update a component when a new object is created创建新对象时使用 React Context API 更新组件
【发布时间】：2020-07-11 12:12:11
【问题描述】：

我是 React 新手，我正在尝试在我正在遵循的教程中使用 React Context API 来更新组件。最初，我使用 json 对象加载推文。在 TweetForm 组件中，在提交表单时，我通过使用 setTweets 函数添加一个新对象来更新这个 tweets 数组。当我控制台记录 tweets 数组时，它显示我的新推文正在添加到数组中，但我的推文没有更新。

有人可以帮忙吗？下面是我在沙盒上的代码的链接。

【问题讨论】：

标签： reactjs react-hooks react-context

【解决方案1】：

在TweetForm.js，在handleSubmit 函数中，你必须使用扩展运算符来设置新的推文，如下所示：

setTweets([...newTweets]);

工作示例：Demo

【讨论】：

嗨，Harish，这似乎在您的演示链接中有效。您能否简要地向我解释一下为什么我的解决方案不起作用，而您的解决方案却起作用？提前致谢！
如果数据没有嵌套，spread 运算符会制作数据的深层副本。当您在数组或对象中嵌套数据时，展开运算符将创建最顶层数据的深层副本和嵌套数据的浅层副本。
在React 和Redux 中，仅当分别通过.setState() 或reducer 检测到change in state 时，您的应用才会更新。浅拷贝可以在调用其中任何一个之前更改状态，因此当它们被调用时，旧状态将显示为等于新状态，并且您的元素不会被更新。
在工作示例中，我们使用spread 运算符，因此根据上述语句，React` 知道状态有changed 并再次调用render() 方法。
由于您是 React 新手，请先尝试了解 React 生命周期。希望它能解决您的疑问，如果是，您可以接受答案。