成功更新提供者后，React 上下文不会将更改传播给其他消费者

Question

这是我的第一个 React Context 实现。我正在使用 Gatsby，在我的 layout.js 中添加了成功传递给消费者的上下文（带有对象和处理函数）：

  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 时，我们将使用 Layout 组件包装页面的每个实例，因此您会看到，您最终会创建多个上下文，而不是创建一个在页面之间共享的上下文。

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

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

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


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

export { wrapRootElement };