javascript - 成功更新提供程序后，React Context 不会将更改传播给其他使用者

Question

这是我的第一个 React Context 实现。我正在使用 Gatsby，并在我的 layout.js 中添加了成功传递给 Consumer 的 Context(带有对象和处理函数):

  import AppContext from "./AppContext"

  const Layout = ({ children }) => {

  let doAuthenticate = () => {
    authState = {
      isAuth: authState.isAuth === true ? false : true,
    }
  }

  let authState = { 
    isAuth: false,
    doAuthenticate: doAuthenticate
  }

  return (
    <>
      <AppContext.Provider value={authState}>
        <main>{children}</main>
      </AppContext.Provider>
    </>
  )

我成功地在 Consumer 中执行了函数:

<AppContext.Consumer>
   { value =>
      <button onClick={value.doAuthenticate}Sign in</button>
    }
</AppContext.Consumer>

我还看到 doAuthenticate 中的值已成功更新。

但是，另一个正在监听 Provider 的 Consumer 不会更新该值。为什么？

Answer 1

当您使用 Gatsby 时，我们将使用布局组件包装页面的每个实例，因此您将看到，您最终会创建多个上下文，而不是创建在页面之间共享的一个上下文。

现在多个上下文无法相互通信

这里的解决方案是利用 wrapRootElement gatsby-ssr.js 和 gatsby-browser.js 中的 api，用单个布局组件包装所有页面

import React from "react";
import Layout from "path/to/Layout";


const wrapRootElement = ({ element }) => {
  return (
    <Layout>
      {element}
    </Layout>
  )
}

export { wrapRootElement };