React Context在react-three-fiber的Canvas深层组件中返回undefined如何解决

react-three-fiber 采用独立的自定义渲染器处理3D场景内容，<Canvas>内部的组件树和外部的DOM组件树分属两个不同的渲染上下文，外部的Context默认不会同步到r3f的渲染器上下文，因此<Cube>作为<Canvas>内部的组件，无法直接获取外层<GameProvider>提供的Context值。

你只需要在<Canvas>内部再嵌套一层你的Context Provider，将外层已经拿到的state和dispatch传入内部的Provider即可，修改后的<Scene>组件代码如下：

const Scene = () => {
  // 外层DOM组件树正常获取状态和dispatch
  const state = useStateContext(); 
  const dispatch = useDispatchContext();
  return (
    <div id={styles.scene}>
      <Canvas >
        {/* 内部3D组件树重新挂载Provider，传入和外层一致的值 */}
        <DispatchContext.Provider value={dispatch}>
          <StateContext.Provider value={state}>
            <OrbitControls minDistance={9} maxDistance={9} />
            <ambientLight intensity={0.5} />
            <spotLight position={[10, 15, 10]} angle={0.3} />
            <Cube
              size={5}
              position={[0, 0, 0]}
            />
          </StateContext.Provider>
        </DispatchContext.Provider>
      </Canvas>
    </div>
  );
};

修改后<Cube>组件内调用useStateContext即可正常获取到状态值。如果需要频繁在Canvas中使用该Context，你也可以把两层Provider封装为单独的组件，简化复用代码。

内容的提问来源于stack exchange，提问作者pythonNovice