使用三元运算符引发 Typeerror 反应导航身份验证流程

Question

我有一个简单的身份验证堆栈如下

export default () => {
  const { state } = useContext(AuthContext);
  return (
    <AuthProvider>
      <NavigationContainer>
        {state.token ? <MainNavigator /> : <AuthNavigator />}
      </NavigationContainer>
    </AuthProvider>
  );
};

token的初始state在AuthContext文件夹中定义为null，代码如下。 但是在运行程序时出现以下错误TypeError: undefined is not an object (evaluating '_useContext.state')

const authReducer = (state, action) => {
  switch (action.type) {
    case "error":
      return { ...state, errorMessage: action.payload };
    case "signin":
      return { errorMessage: "", token: action.payload };
    default:
      return state;
  }
};

const tokencheck = (dispatch) => async () => {
  const token = await AsyncStorage.getItem("token");
  if (token) {
    dispatch({ type: signin, payload: token });
    navigate("Home");
  } else {
    navigate("SignIn");
  }
};

const signup =
  (dispatch) =>
  async ({ username, password }) => {
    try {
      const response = await tracker({
        method: "post",
        url: "/user",
        data: qs.stringify({
          username: username,
          password: password,
        }),
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      });
      await AsyncStorage.setItem("token", response.data.email);
      // dispatch({ type: "signin", payload: response.data.access_token });
      navigate("SignIn");
    } catch (err) {
      dispatch({
        type: "error",
        payload: "Something's not write, plz try again",
      });
      console.log(err);
    }
  };

const signin =
  (dispatch) =>
  async ({ username, password }) => {
    try {
      const response = await tracker({
        method: "post",
        url: "/login",
        data: qs.stringify({
          username: username,
          password: password,
        }),
        headers: {
          "content-type": "application/x-www-form-urlencoded;charset=utf-8",
        },
      });
      await AsyncStorage.setItem("token", response.data.access_token);
      dispatch({ type: "signin", payload: response.data.access_token });
      navigate("Home");
    } catch (err) {
      console.log(err);
      dispatch({
        type: "error",
        payload: "Start debuggin",
      });
    }
  };

const signout = (dispatch) => {
  return () => {};
};

export const { Provider, Context } = creatingContext(
  authReducer,
  { signin, signout, signup, tokencheck },
  { token: null, errorMessage: "" }
);

三元逻辑是合理的，我已经定义了初始 state 那么为什么这个错误仍然存在。

Answer 1

当我在令牌中寻找 state 时，我应该寻找的是价值。 问题很简单

{state.token != null : <nav/>?<auth/>}