在 React Native 中使用 useContext 的上下文 API 显示了一个 TypeError

Question

我正在尝试在 React-Native 中使用现代上下文 API，但收到以下错误：

类型错误： 类型错误： 未定义不是对象(评估 "Context._context"(

my createDataContext.js：

import React, { useReducer } from 'react'
export default (reducer, actions, defaultValue) => {
const Context = React.createContext()
const Provider = ({ children }) => {
const [state, dispatch] = useReducer(reducer, defaultValue)
const boundActions = {}
for (let key in actions) {
boundActions[key] = actions[key](dispatch)
}
return (
<Context.Provider value={{ state, ...boundActions }}>
{children}
</Context.Provider>
)
}
return { Context, Provider }
}

我的上下文.js：

import { AsyncStorage } from 'react-native'
import createDataContext from './createDataContext'
import { 
LOGIN_FIRST_STEP, 
LOGIN_SECOND_STEP,
AUTH_MODAL, 
SIGNIN_MODAL,
SIGNUP_MODAL,
} from '../constants'
const INITIAL_STATE = {
email: '',
firstName: '',
lastName: '',
password: '',
cardNumber: '',
expiration: '', 
CVV: '',
billingAddress: '',
authOpen: false,
signupOpen: false,
signinOpen: false,
}
const reducer = (state = INITIAL_STATE, { type, payload }) => {
switch (type) {
case LOGIN_FIRST_STEP: 
const { email, firstName, lastName, password } = payload
return {
...state,
email,
firstName,
lastName,
password,
}
case LOGIN_SECOND_STEP: 
const { cardNumber, expiration, CVV, billingAddress } = payload
return {
...state,
email,
cardNumber,
expiration,
CVV,
billingAddress,
}
case AUTH_MODAL:
return {
...state,
authOpen: true,
signupOpen: false,
signinOpen: false,
}
case SIGNUP_MODAL:
return {
...state,
authOpen: false,
signupOpen: true,
signinOpen: false,
}
case SIGNIN_MODAL:
return {
...state,
authOpen: false,
signupOpen: false,
signinOpen: true,
}
default:
return state
}
}
const login = dispatch => values => {
dispatch({ type: LOGIN_FIRST_STEP, payload: values })
}
const login2 = dispatch => values => {
dispatch({ type: LOGIN_SECOND_STEP, payload: values })
}
const auth = disaptch => () => {
dipatch({ type: AUTH_MODAL })
}
const signin = disaptch => () => {
dipatch({ type: SIGNIN_MODAL })
}
const signup = disaptch => () => {
dipatch({ type: SIGNUP_MODAL })
}
export const { Provider, Context } = createDataContext(
reducer,
{ login, login2, auth, signin, signup },
{ authOpen: false , signinOpen: false, signupOpen: false }
)

package.json：

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@apollo/react-hooks": "^3.1.1",
"apollo-cache-inmemory": "^1.6.3",
"apollo-client": "^2.6.4",
"apollo-link": "^1.2.13",
"apollo-link-error": "^1.1.12",
"apollo-link-http": "^1.5.16",
"apollo-link-state": "^0.4.2",
"apollo-link-ws": "^1.0.19",
"apollo-utilities": "^1.3.2",
"expo": "^34.0.1",
"formik": "^1.5.8",
"graphql": "^14.5.6",
"graphql-tag": "^2.10.1",
"react": "16.8.3",
"react-apollo": "^3.1.1",
"react-dom": "^16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
"react-native-gesture-handler": "~1.3.0",
"react-native-maps": "~0.24.0",
"react-native-reanimated": "~1.1.0",
"react-native-web": "^0.11.4",
"react-navigation": "^4.0.6",
"react-navigation-stack": "^1.8.0",
"react-navigation-tabs": "^2.5.4",
"subscriptions-transport-ws": "^0.9.16",
"yup": "^0.27.0"
},
"devDependencies": {
"babel-preset-expo": "^6.0.0"
},
"private": true
}

最后应用.js：

export default App = () => {
return (
<ApolloProvider client={client}>
<ApolloHooksProvider client={client}>
<ContextProvider>
<Root />
</ContextProvider>
</ApolloHooksProvider> 
</ApolloProvider>
)
}

当我尝试通过导入Context并使用useContext钩子来使用时：

const {
state,
authModal
} = useContext(Context)

上述错误显示。 我尝试删除react-native软件包并使用最新版本重新安装它。 我尝试删除节点模块，清除缓存并重新安装它们，但似乎都没有解决问题。

Answer 1

我遇到了同样的错误，这是因为我像这样导入上下文：

从"..."导入 {上下文}

而不是

从".."导入上下文

Answer 2

对我来说，这就像...我忘了将提供程序添加到我的主 (App.js( 文件中。

Answer 3

Try this:
Suppose you have a DataContext.js
--
import React, {createContext} from 'react';
export const DataContext = createContext();
export default function DataProvider({children}) {
return (
<DataContext.Provider>
{children}
</DataContext.Provider>
);
};
Then, try to import them like this: 
--
import your provider without curly braces And your context within curly braces;
--
import DataProvider  from "./src/context/DataContext";
import {DataContext}  from "./src/context/DataContext";
Or: 
import DataProvider , {DataContext}  from "./src/context/DataContext";