我遇到了一个奇怪的问题,实际上,我正在使用一个 react native 应用程序中的react -还原. 当用户登录时,用户配置文件中的一切都很顺利,但一旦我关闭应用程序并再次返回,我得到的是一种奇怪的JSON格式.

用户减少器:

import AsyncStorage from '@react-native-async-storage/async-storage';

export function userReducer(
  state = AsyncStorage.getItem('user') ? AsyncStorage.getItem('user') : null,

  action,
) {
  switch (action.type) {
    case 'LOGIN':
      return action.payload;
    case 'LOGOUT':
      return null;
    case 'VERIFY':
      return { ...state, verified: action.payload };
    case 'USER_LIST_RESET':
      return { users: [] };
    default:
      return state;
  }
}


登录表:

  const submitForm = async () => {
  if (isValidForm()) {
    try {
     const { data } = await axios.post(
    'https://c36a-196-235-44-112.eu.ngrok.io/login',
        {
          email,
          password,
        },
      );
      dispatch({ type: 'LOGIN', payload: data });
      AsyncStorage.setItem('user', JSON.stringify(data));
      console.log('Logged In');
      navigation.navigate('home');
    } catch (error) {
      console.log(error.message);
    }
  }
};

在用户配置文件中获取用户:

 const { user } = useSelector(state => ({ ...state }));
 console.log(user)

我登录后获得的第一个数据是:

{"first_name": "John", "id": "63b0a010c015dd4b1f5fdb2c", "last_name": "Doe", "message": "Register Success ! please activate your email to start", "picture": "pic.png", "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYjBhMDEwYzAxNWRkNGIxZjVmZGIyYyIsImlhdCI6MTY3Mjk1MjU3NCwiZXhwIjoxNjczNTU3Mzc0fQ.XI9JnC4eeOQb5YJkNCC-Bqw4F9gpA1Xm6k_qJdkaXuw", "username": "JohnDoe", "verified": false}

关闭并重新打开应用程序后,我获得的第二个数据是:

{"_A": null, "_x": 0, "_y": 1, "_z": "{\"id\":\"63b0a010c015dd4b1f5fdb2c\",\"username\":\"JohnDoe\",\"picture\":\"pic.png\",\"first_name\":\"John\",\"last_name\":\"Doe\",\"token\":\"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYzYjBhMDEwYzAxNWRkNGIxZjVmZGIyYyIsImlhdCI6MTY3Mjk1MTY3NiwiZXhwIjoxNjczNTU2NDc2fQ.lVLg3pjfTFGt1K63v76sucinIUZJgOxSujSox12Xy0s\",\"verified\":false,\"message\":\"Register Success ! please activate your email to start\"}"}

如果我关闭应用程序,我试图获得相同的数据,但我没有,我实际上得到了另一个与我正在使用的逻辑不兼容的JSON表单.

推荐答案

AsyncStorage.getItem()返回promise ,它是一个异步函数: https://reactnative.dev/docs/asyncstorage#getitem

因此,在检索项时,您需要使用Async/Await语法等待promise 解析,然后才能对检索到的项执行某些操作,或者需要在调用AsyncStorage.getItem()时指定一个回调函数,在该函数中对检索到的项执行某些操作.

React-native相关问答推荐

React Navigation—从标题按钮打开模式

替换数组中的一个元素就是替换数组中的所有元素?

React native React native下拉 Select 器下拉列表不透明问题

在 React Native 中,水平滚动不适用于我的整个应用程序

react 本机 TextInput 将其他元素移出屏幕

如何在 Recompose 中使用 withHandlers 将 refs 添加到功能组件并在 ScrollView 上调用 ScrollTo?

React 从 babel 6 到 babel 7 的原生升级

React Native 错误:Animated.event now requires a second argument for options

React-navigation:增加底部标签导航的高度?

React Native 错误找不到模块metro-config/src/defaults/blacklist

Firebase检测用户是否存在

修复错误:路由 'Home' 的组件必须是 React 组件

在 React Native 中仅显示第一行文本

如何在 React-Native 的alert中设置alert框标题?

如何在 React 中使用带有钩子的生命周期方法?

如何将本地文本文件加载到 React Native Project 中的字符串变量中?

键盘上方的 React Native 完成按钮

如何使 react-native Picker 停留在新 Select 的选项?

由于对 sourcetree 的 husky 预推送,Git 推送失败

React-native google 登录给开发人员错误