undefined 不是 react-native 中的对象（评估 'context._context'）

Question

我正在尝试在我的 react-native 应用程序中实现 useContext 但出现错误：“undefined is not an object (evaluating 'context._context')”。

这是我的代码（尝试使用 EmailContext）：

import React, {useState} from 'react';

export const Emailcontext = React.createContext("");

const ContextStore = ({children}) => {
    const [emailAddress, setEmailAddress] = useState("");

    return(
        <Emailcontext.Provider value={[emailAddress, setEmailAddress]}>
            {children}
        </Emailcontext.Provider>
    );
}

export default ContextStore;

在这里，我用 ContextStore 包装了我的应用程序：

    <ContextStore>
      <NavigationContainer>
        <Stack.Navigator 
          screenOptions={{headerShown: false}}
        >
          <Stack.Screen name='EmailVerification' component={EmailVerification} />
          <Stack.Screen name='VerifyEmailExplenation' component={VerifyEmailExplenation} />
        </Stack.Navigator>
      </NavigationContainer>
    </ContextStore>

然后上下文在此组件中未定义：

import React, {useContext, useState} from 'react';
import {EmailContext} from '../ContextStore'

const EmailVerification = ({navigation}) => {
    const [emailAddress, setEmailAddress] = useContext(EmailContext);
  
    return(
      **jsx element**
    );
}
export default EmailVerification;

找不到任何解决方案..

Answer 1

我错了你导入的是EmailContext应该是Emailcontext 您的电子邮件验证组件应如下所示：

import React, {useContext, useState} from 'react';
import {Emailcontext} from '../ContextStore'

const EmailVerification = ({navigation}) => {
    const [emailAddress, setEmailAddress] = useContext(Emailcontext);
  
    return(
      **jsx element**
    );
}
export default EmailVerification;

您还已将 ContextStore 设置为默认导出，因此在导入到您的 app.js 时确保您是这样导入的：

import ContextStore from '...correct path'

我知道你正在使用 react-native 但这是 CRA 的代码笔，我将 index.js 包装在提供程序中并正确导入 app.js 以进行模拟您的 EmailVerification 组件。

https://codesandbox.io/s/admiring-shaw-5yrs3?file=/src/App.js

undefined 不是 react-native 中的对象（评估 'context._context'）

undefined is not an object (evaluating 'context._context') in react-native

reactjs

react-native

react-navigation

use-context