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

Question

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

如果我使用传统类，我总是可以让它工作，但我想找出这种行为的原因。有一些简单的组件，阅读不多，你可以在这里查看：

https://codesandbox.io/s/v661kq4zx3

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

谢谢。

Answer 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`
    ]);
};

Answer 2

试试这个：

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

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

How can I make react render the new state modifications after I have updated the state with hooks and context

reactjs

react-context

react-hooks