Reactjs 包装保护+；contextAPI:页面更改会导致提供程序重新呈现，因此会重置状态 总结

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

我的理解是，使用wraprotement方法应该意味着我的stateProvider应该持久化

关于如何调试此问题的一些建议将不胜感激

相关信息 gatsby-browser.js

const StateProvider=require（“./src/components/store/store”）.StateProvider
exports.wraproteElement=（{element}）=>{
返回{element}
}

store.js

const StateProviderContext=createContext（）
const DispatchProviderContext=createContext（）
const StateProvider=（{children}）=>{
console.log（“init”）
常量tocTree=useEntries（）
常量initialState=减速机(
{},
{
类型：初始页面，
值：{pathname，tocTree}，
}
)
const[state，dispatch]=useReducer（reducer，initialState）
返回(
{儿童}
)
}

请遵循以下步骤：

通常，您需要在

gatsby ssr.js

和

gatsby browser.js

中实现

wraprotement

您可以看到，我提取了

wraprootement.js

，并将其导入上述两个文件中

/wraprootement.js

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

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

export default wrapRootElement

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }

gatsby ssr.js

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

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

export default wrapRootElement

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }

import wrapRootElement from "./wrapRootElement"

export { wrapRootElement }

---

我也有同样的问题；更改页面后，状态被重置。解决我问题的要点是，你应该使用盖茨比的

来更改页面（我以前使用的是

标记）

---

我的代码现在可以完美工作，无需使用

gatsby ssr。js

StateProvider

不会被导出。这是问题吗？@PaulBunker我和盖茨比也有同样的问题。你解决问题了吗？谢谢