如何解决React Native:具有React Navigation v5错误的上下文提供程序:undefined不是对象正在评估'_ref4.navigation'
我想使用contextAPI提供状态管理并响应App.js中的navigaton v5。 但是useContext的返回状态是不确定的,我已经搜索了很多,在大多数情况下,包装应用程序组件可以解决问题,但在我的情况下却没有,请问有人可以确定问题吗? 这是App.js
import { Provider as AuthProvider } from "./app/context/AuthContext";
import { Context as AuthContext } from "./app/context/AuthContext";
const Stack = createStackNavigator();
function App() {
const { state } = React.useContext(AuthContext);
console.log(state);
return (
<NavigationContainer>
<Stack.Navigator>
{state.token === null ? (
<>
<Stack.Screen
options={{ headerShown: false }}
name="Auth"
component={authFlow}
/>
</>
) : (
<Stack.Screen
options={{ headerShown: false }}
name="Home"
component={homeFlow}
/>
)}
</Stack.Navigator>
</NavigationContainer>
);
}
export default () => {
return (
<AuthProvider>
<App />
</AuthProvider>
);
};
这是AuthContext.js
const authReducer = (state,action) => {
switch (action.type) {
case "add_error":
return { ...state,errorMessage: action.payload };
case "signin":
return { errorMessage: "",token: action.payload };
case "signout":
return { token: null,errorMessage: "" };
case "clear_error_message":
return { ...state,errorMessage: "" };
default:
return state;
}
};
const signin = (dispatch,{ navigation }) => {
return async ({ username,password }) => {
try {
const response = await textApi.post("/login/",{ username,password });
await AsyncStorage.setItem("token",response.data.token);
dispatch({ type: "signin",payload: response.data.token });
navigation.navigate("Profile");
} catch (err) {
dispatch({
type: "add_error",payload: "Something went wrong with the sign in",});
}
};
};
export const { Provider,Context } = createDataContext(
authReducer,{ signin,signout,signup,clearErrorMessage,tryLocalSignin },{ token: null,errorMessage: "" }
);
这是createDataContext.js
import React,{ useReducer } from "react";
export default (reducer,action,defaultValue) => {
const Context = React.createContext();
const Provider = ({ children }) => {
const [state,dispatch] = useReducer(reducer,defaultValue);
const boundActions = {};
for (let key in action) {
boundActions[key] = action[key](dispatch);
}
return (
<Context.Provider value={{ state,...boundActions }}>
{children}
</Context.Provider>
);
};
return { Context: Context,Provider: Provider };
};
我没有发布完整的代码,但是我认为问题出在上面,代码类似于此处的React Native Authentication With ContextAPI
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。