即使一切看起来都正确，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}) => {&nbsp; return (&nbsp; &nbsp; <SampleContext.Provider value={{a: 'a', b: 'b'}}>&nbsp; &nbsp; &nbsp; {children}&nbsp; &nbsp; </SampleContext.Provider>&nbsp; );};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 是否具有上下文值！