即使一切看起来都正确，UseContext 返回 undefined

Question

我有一个堆栈导航器，它打开一个屏幕，屏幕使用上下文和提供程序，但useContext似乎返回未定义。我们有这个：<Stack.Navigator>  <Stack.Screen name="preLogin" component={SomeScreen} />  <Stack.Screen name="postLogin" component={SomeScreen2} /></Stack.Navigator>在 SomeScreen2 我们有这个：import React from 'react';import {SampleContextProvider} from './provider/SampleContext';import WelcomeScreen from './welcome';const SomeScreen2Container = ({navigation}) => {  return (    <>      <SampleContextProvider>        <WelcomeScreen navigation={navigation}/>      </SampleContextProvider>    </>  );};export default SomeScreen2Container;示例上下文：import React from 'react';const SampleContext = React.createContext({a:"a",b:"b"});const SampleContextProvider = ({children}) => {  return (    <SampleContext.Provider>      {children}    </SampleContext.Provider>  );};export { SampleContext, SampleContextProvider };在 WelcomeScreen 我正在使用useContext：import {SampleContext} from '../provider/SampleContext';const ctx = useContext(SampleContext);console.log("contextx=>", ctx);它是未定义的。随时询问更多信息

Answer 1

SampleContext将您的文件更改为：

import React from 'react';

const SampleContext = React.createContext();

const SampleContextProvider = ({children}) => {

  return (

    <SampleContext.Provider value={{a: 'a', b: 'b'}}>

      {children}

    </SampleContext.Provider>

  );

};

export {SampleContext, SampleContextProvider};

我在提供者值道具中定义了您的默认上下文值，而不是作为createContext.

提供者的 value 属性会覆盖在createContext. 这意味着如果您不设置value是否使用提供程序，则默认值将覆盖为未定义。

Answer 2

在您的欢迎屏幕中尝试执行此操作

import {SampleContext} from '../provider/SampleContext';

const {a,b}= useContext(SampleContext);

console.log("contextx=> ", a+' '+b);

我认为解构该值可能会帮助您确认 sampleContext 是否具有上下文值！