[英]Unable to use React Context in deep descendant components
I am trying to use global state in my React app using React Context
and the useReducer
hook.我正在尝试使用React Context
和useReducer
钩子在我的 React 应用程序中使用全局 state。 When I try to access state using my useStateContext
hook in distant descendants, I get back undefined.当我尝试在遥远的后代中使用我的useStateContext
挂钩访问 state 时,我返回未定义。 To preface, I am also using react-three-fiber
as well where I am getting my context error.作为序言,我也在使用react-three-fiber
,我得到了我的上下文错误。
App.js
const App = () => {
return (
<GameProvider>
<AppState />
</GameProvider>
);
};
const AppState = () => {
const state = useStateContext() // this works. Direct child of Provider
return <Game />
}
const Game = () => {
const state = useStateContext(); // this works. 2nd descendant of Provider
return <Scene/>
};
const Scene = () => {
const state = useStateContext(); // this works. 3rd descendant
return (
<div id={styles.scene}>
<Canvas >
<OrbitControls minDistance={9} maxDistance={9} />
<ambientLight intensity={0.5} />
<spotLight position={[10, 15, 10]} angle={0.3} />
<Cube
size={5}
position={[0, 0, 0]}
/>
</Canvas>
</div>
);
};
const Cube = () => {
const state = useStateContext(); // returns undefined. What gives?
return <group></group>
}
StateContext.js
import React, { useContext, createContext, useReducer } from 'react'
import reducer from './reducer';
const StateContext = createContext();
const DispatchContext = createContext();
export const useDispatchContext = () => useContext(DispatchContext)
export const useStateContext = () => useContext(StateContext);
const initialState = {
test: 1
}
export const GameProvider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<DispatchContext.Provider value={dispatch}>
<StateContext.Provider
value={state}
>
{children}
</StateContext.Provider>
</DispatchContext.Provider>
)
}
I wanted to use Context since I figured I could get the state in any descendant of my application.我想使用上下文,因为我认为我可以在我的应用程序的任何后代中获得 state。 I've tried checking the react docs about this issue but to no avail.我已经尝试检查有关此问题的反应文档,但无济于事。
EDIT:编辑:
Also I think it might be important to mention that I am using react-three-fiber
which is wrapping my Cube
component in a Canvas
.另外我认为重要的是要提到我正在使用react-three-fiber
,它将我的Cube
组件包装在Canvas
中。
Turns out this is a pretty common issue with using the React Context api with react-three-fiber
.事实证明,这是使用带有react-three-fiber
的 React Context api 的一个非常常见的问题。 Through the documentation I decided to use react-three-drei
's useContextBridge
since I was already using the package.通过文档,我决定使用react-three-drei
的useContextBridge
,因为我已经在使用 package。 Found the documentation here for my solution在这里找到我的解决方案的文档
const ContextBridge = useContextBridge(StateContext, DispatchContext)
return (
<div id={styles.scene}>
<Canvas >
<OrbitControls minDistance={9} maxDistance={9} />
<ambientLight intensity={0.5} />
<spotLight position={[10, 15, 10]} angle={0.3} />
<spotLight position={[10, -15, -30]} angle={0.3} />
<ContextBridge>
<Cube
size={5}
position={[0, 0, 0]}
/>
</ContextBridge>
</Canvas>
</div>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.