Question

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

  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中的值已成功更新。

但是，正在监听提供者的另一个使用者不会更新该值。为什么？

Answer 1

使用Gatsby时，页面的每个实例都将被Layout组件包裹，因此您将看到，创建的不是在页面之间共享的一个Context，而是创建多个上下文。

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

这里的解决方案是利用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 };

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

1 个答案: