javascript - 成功更新提供程序后，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>
    </>
  )

我在消费者中成功执行功能:

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

我也看到了 doAuthenticate 中的值成功更新。

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

Answer 1

当您使用 Gatsby 时，Page 的每个实例都将与 Layout 组件一起包装，因此您将看到，不是创建一个在页面之间共享的 Context，您最终会创建多个上下文。

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

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

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


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

export { wrapRootElement };