ReactNative：AsyncStorage 问题：我无法正确检索数据

Question

我正在尝试通过使用 setItem()

将令牌保存到 AsyncStorage 来在我的项目中使用 AsyncStorage

使用令牌响应的操作

 import axios from 'axios'; 
 import {URL, Config} from '../../service/Api';   
 import AsyncStorage from '@react-native-async-storage/async-storage';

export const checkSmsToLoginUser = value => async dispatch => {
  dispatch({type: 'USER_LOGIN_REQUEST'});
  try {
    const {data} = await axios.post(`${URL}user/checkSMSCode`, value, Config);
    console.log(data.token); // it consoles the token
    await AsyncStorage.setItem('USER_TOKEN', data.token);
    dispatch({type: 'USER_LOGIN_SUCCESS', payload: data?.token});
  } catch (error) {
    dispatch({type: 'USER_LOGIN_ERROR', payload: error});
  }
};

然后我在组件中分派操作，然后我尝试使用 getItem

从 AsyncStorage 获取令牌

 const getData = async () => {
    try {
      const token = await AsyncStorage.getItem('USER_TOKEN');
      return token, JSON.parse(token);
    } catch (error) {
      return error;
    }
  };

  console.log(getData(), 'token From AsyncStorage');

但是当我控制来自 AsyncStorage 的令牌时，我有一些未处理的承诺

有什么问题或解决方案的线索吗？

Answer 1

您正在打印异步函数而不等待它。

代码正确，但控制台日志不正确：

console.log(getData(), 'token From AsyncStorage'); // missing async logic

在 getData 函数中插入控制台日志，或等待响应。

Answer 2

这可能有帮助

function App() {

  const getData = async () => {
    try {
      const token = await AsyncStorage.getItem('USER_TOKEN');

      // Log here
      console.log(JSON.parse(token), 'token From AsyncStorage');

    } catch (error) {
      return error;
    }
  };

  useEffect(() => {
   getData(); // call here
  }, []);

  return (
    <View>
      ...
    </View>
  );
}

Answer 3

通过在 UseEffect 中添加 getData() 并使用 then().catch() 处理承诺对我有用

 useEffect(() => {
    getData()
      .then(res => {
        console.log(res, 'it worked');
        setToken(res);
      })
      .catch(err => {
        setError(err);
        console.log(err);
      });
  }, []);

ReactNative：AsyncStorage 问题：我无法正确检索数据

ReactNative: AsyncStorage Problem : I can't retrieve Data the correctly

react-native

asyncstorage

react-native-android

react-native-ios