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

Posted 2023-04-14

【中文标题】在 Next.js 中，如何使用来自 getServerSideProps 的数据更新 React Context 状态？

【英文标题】：In Next.js, how can I update React Context state with data from getServerSideProps?

【发布时间】：2021-12-31 02:03:40

【问题描述】：

我在学习如何将数据正确加载到我的 todo 应用中的状态时遇到了很多麻烦。

我有一个 next.js 页面组件 pages/index.tsx，我通过 getServerSideProps 从我的 API 加载数据并将其作为名为 tasksData 的页面道具返回。

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

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

我面临的挑战是如何使我的 UI 的“真实来源”成为存储在我的上下文提供程序中的状态（例如，const tasks , dispatch = useBoard();，而不是从我的 API 返回的页面页面道具（例如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 结合使用的示例？

【问题讨论】：

第一次获取数据时为什么不设置任务？

@SILENT 我无法做到这一点，因为 React Hooks 不能在 Next.js 中使用服务器端 getServerSideProps(). 如果可以，那绝对是理想的解决方案！

您可以通过getServerSideProps获取数据并将其传递到相应的页面。如果页面将其检测为undefined，则该页面应获取它。但是，您提到了待办事项。 Todos 是多租户的（即特定于用户/组织的）。你不应该加载这种类型的数据服务器端。

【参考方案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 了解更多信息。