Question

我有一个堆栈导航器，它打开一个屏幕，该屏幕使用Context和提供程序，但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;

SampleContext：

import React from 'react';

const SampleContext = React.createContext({a:"a",b:"b"});

const SampleContextProvider = ({children}) => {
  return (
    <SampleContext.Provider>
      {children}
    </SampleContext.Provider>
  );
};

export { SampleContext, SampleContextProvider };

在欢迎屏幕中，我正在使用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};

我在提供程序值prop中定义了默认上下文值，而不是作为createContext的参数。

提供者的值属性会覆盖createContext中设置的默认值。这意味着如果您未使用提供程序，则未设置value，则默认值将覆盖为undefined。

有关更多信息，请查看以下内容：React.createContext point of defaultValue?。

Answer 2

在欢迎屏幕上尝试执行此操作

import {SampleContext} from '../provider/SampleContext';
const {a,b}= useContext(SampleContext);
console.log("contextx=> ", a+' '+b);

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

即使看起来一切正常，UseContext也会返回未定义的

2 个答案: