wrapRootElement + contextAPI ：页面更改导致提供者重新渲染，因此重置状态

Posted 2023-04-14

【中文标题】wrapRootElement + contextAPI ：页面更改导致提供者重新渲染，因此重置状态

【英文标题】：wrapRootElement + contextAPI : Page changes cause provider to re-render therefore resetting state

【发布时间】：2020-06-21 16:10:14

【问题描述】：

总结

我正在使用 React 上下文 api 和钩子来创建一个全局“StateProvider”，但是当我更改页面时，我的提供程序会重新呈现，导致我失去活动状态并返回默认值。

据我了解，使用 wrapRootElement 方法应该意味着我的 stateProvider 应该持续存在。

非常感谢有关如何调试此问题的一些建议！

相关信息

gatsby-browser.js

const StateProvider = require("./src/components/store/store").StateProvider
exports.wrapRootElement = ( element ) => 
  return <StateProvider>element</StateProvider>

store.js

const StateProviderContext = createContext()
const DispatchProviderContext = createContext()

const StateProvider = ( children ) => 
  console.log("init")
  const tocTree = useEntries()
  const initialState = reducer(
    ,
    
      type: INIT_PAGE,
      value:  pathname, tocTree ,
    
  )
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <StateProviderContext.Provider value=state>
      <DispatchProviderContext.Provider value=dispatch>
        children
      </DispatchProviderContext.Provider>
    </StateProviderContext.Provider>
  )

【问题讨论】：

StateProvider 未导出。会不会是这个问题？

@PaulBunker 我对 Gatsby 也有同样的问题。你解决问题了吗？谢谢

【参考方案1】：

关注：https://codesandbox.io/s/soanswer60606158-pfm2b

通常您需要在gatsby-s-s-r.js 和gatsby-browser.js 中实现wrapRootElement。

https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement

你可以看到我提取了wrapRootElement.js，在提到的两个文件中都导入了。

./wrapRootElement.js

import React from "react"
import StateProvider from "./src/components/store/store"

const wrapRootElement = ( element ) => 
  return <StateProvider>element</StateProvider>


export default wrapRootElement

gatsby-browser.js

import wrapRootElement from "./wrapRootElement"

export  wrapRootElement 

gatsby-s-s-r.js

import wrapRootElement from "./wrapRootElement"

export  wrapRootElement 

【参考方案2】：

我遇到了同样的问题；更改页面后状态正在重置。解决我问题的一点是你应该使用盖茨比的<Link> 来更改页面（我之前使用的是<a> 标签）。

我的代码现在可以完美运行，不需要gatsby-s-s-r.js。