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

【问题标题】：React navigation auth flow using ternary operator throwing Typeerror使用三元运算符引发 Typeerror 反应导航身份验证流程
【发布时间】：2022-08-10 03:19:39
【问题描述】：

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

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

令牌的初始状态在 AuthContext 文件夹中定义为 null，代码如下。但是在运行程序时出现以下错误TypeError: undefined is not an object (评估\'_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.token 不一样。
错误仍然存在。
添加creatingContext()的代码

标签： javascript react-native authentication expo react-navigation

【解决方案1】：

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

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

【讨论】：