在 Next.js 中，如何使用来自 getServerSideProps 的数据更新 React 上下文状态？

Question

我在学习如何将数据正确加载到待办事项应用程序的状态时遇到了很多麻烦。

我有一个 next.js 页面组件 pages/index.tsx，我通过 getServerSideProps 从我的 API 加载数据，return 它作为一个名为 tasksData.

tasksData 被正确 return 编辑，我可以通过 prop 解构在我的页面组件中访问它们：const Home = ({ tasksData }: Home) => { }

我在 _app.tsx 中也有一个名为 BoardProvider 的 React 上下文提供程序。这会为我的任务板存储状态，并使用 React 上下文 API 中的 useReducer() 来更新上下文消费者中的此状态，例如 pages/index.tsx.

我面临的挑战是如何使我的 UI 的“真实来源”成为存储在我的上下文提供程序中的 状态（例如 const { { tasks }, dispatch } = useBoard();，而不是来自我的 API 的页面道具 return（例如 tasksData 道具）。

我考虑的一种方法是简单地在 getServerSideProps 中加载数据，然后通过 useEffect 挂钩中的分派操作设置状态：

useEffect(() => { // On first render only, set the Context Provider state with data from my page props. dispatch({ type: TaskAction.SET_TASKS, payload: tasksData }); });

然而，这似乎不起作用，因为有时 tasksData 是 undefined，大概是因为 Next.js 尚未使其在页面装载上可用。

我听说的另一个 suggestion 是获取数据并将其作为 pageProps 传递给我在 _app.tsx 中的上下文提供程序。我相信这意味着在 _app.tsx 中使用 getInitialProps()，以便我的提供者的初始状态由我的 API 填充。但是，这禁用了静态优化和其他有用的功能。

谁能帮我提供一些伪代码、文档或示例，说明如何将 getServerSideProps 与 React Context API 结合使用？

Answer 1

几点：

getServerSideProps 应该在页面呈现之前调用。所以理论上你的 tasksData 是 undefined 是一个错误！你不可能让服务器数据不可用，除非你一开始就真的打算让这种情况发生。
假设 getServerSideProps 始终返回正确的数据，但您想使用自己的数据覆盖它。在你的上下文中，你可以有这个逻辑。

  const Home = ({ tasksData }) => {
    const value = { tasksData: {
      // let me override it
    }}
    return (
      <Context.Provider value={value}>
      ...
      <Context.Provider>
    )
  }

如果你有一个页面下提供的context，上面的代码就是你所需要的。但是，如果您的上下文是在根（页面的父级）中提供的，您仍然可以添加上面的代码以使用覆盖值再次重新提供相同的上下文。因为这就是 context 的设计方式，请阅读 https://javascript.plainenglish.io/react-context-is-a-global-variable-b4b049812028 了解更多信息。

在 Next.js 中，如何使用来自 getServerSideProps 的数据更新 React 上下文状态？

In Next.js, how can I update React Context state with data from getServerSideProps?

reactjs

next.js

react-context