使用钩子和上下文更新状态后，如何使反应呈现新的状态修改答案

【问题标题】：How can I make react render the new state modifications after I have updated the state with hooks and context使用钩子和上下文更新状态后，如何使反应呈现新的状态修改
【发布时间】：2019-05-05 16:47:10
【问题描述】：

我制作了一个 AddMovie 组件，它将在上下文组件中将电影添加到当前状态。我让它在添加每部电影后更新电影的数量，我还让它将最新添加的电影与其他电影一起添加到 DOM 中。问题是最新电影的名称没有与其他电影一起显示。

如果我用传统的课程做这个，我总是可以让它工作，但我想找出这种行为的原因。有一些简单的组件，没有太多可以阅读的内容，您可以在这里查看：

https://codesandbox.io/s/v661kq4zx3

问题是，随着我添加更多电影，上下文组件中电影数组中的项目数量正在更新。我要解决的问题是使新添加的电影与其他电影一起显示。

谢谢。

【问题讨论】：

标签： reactjs react-hooks react-context

【解决方案1】：

您将新电影的标题绑定到name 属性，但在您的Movie 组件中，您使用title 属性来显示title。

只需更改AddMovie 组件内的addMovie 函数即可将新标题保存到title 属性中。

const addMovie = evt => {
    evt.preventDefault();
    setMovies(prevMovies => [
      ...prevMovies,
      { title: name, overview: "OK", id: movies.length + 1 } // <--- Here was previously `name` instead of `title`
    ]);
};

【讨论】：

我还发现问题出在 title 和 name 上。通过更改名称和标题列表开始更新
是的，title 是属性，而不是名称。简直不敢相信就是这样。我原以为这是与我使用钩子的方式有关的一些复杂问题。谢谢
上述工作代码和框：codesandbox.io/s/6vmol153o3。 @Tarasi - 使用 useCallback 并确保空提交不会添加电影。
有趣的解决方案，你觉得 useCallback 比上面的解决方案更好用吗？

【解决方案2】：

试试这个：

const addMovie = evt => {
 evt.preventDefault();
 setMovies(prevMovies => [
   ...prevMovies,
   { title: name, overview: "OK", id: movies.length + 1 }
 ]);
};

【讨论】：