React Native中如何将AsyncStorage异步返回值赋值给useState状态

问题根因 #

1. 第一种写法中，useState 不支持接收异步函数的返回值作为初始状态，你传入 getdata() 拿到的是 Promise 实例，不是实际读取到的存储值，因此无法生效。
2. 第二种写法的执行顺序是 JS 异步机制的正常表现：异步函数调用不会阻塞后续同步代码的执行，所以调用 getData() 后会立刻执行后面的 console.log('moving on...')，等存储读取完成后才会打印 retrieved Data!，不属于代码错误，只是你的执行预期不符合异步逻辑的运行规则。

正确实现方案 #

你需要把依赖读取结果的后续逻辑放到异步操作完成后的回调位置，同时可以加加载状态避免页面渲染异常，示例代码如下：

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { View, Text } from 'react-native';

async function getData(){
  const d = await AsyncStorage.getItem('Name');
  console.log('retrieved Data!');
  return d;
}

export default function App() {
  // 初始值可以根据业务场景设为 null/空字符串，新增加载状态控制页面展示
  const [name, setName] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchStoredName = async () => {
      const nameValue = await getData();
      setName(nameValue);
      setIsLoading(false);
      // 需要等数据读取完成后执行的后续逻辑，放到这里
      console.log('moving on...');
    };

    fetchStoredName();
  }, []);

  // 加载过程中可以展示占位内容，避免无数据导致的渲染异常
  if (isLoading) {
    return <View><Text>数据加载中...</Text></View>
  }

  return (
    <View>
      <Text>读取到的名称：{name}</Text>
    </View>
  )
}

如果你的后续逻辑和读取操作分离，也可以单独监听 name 的变化来触发：

useEffect(() => {
  // 排除初始状态的干扰，确认拿到有效值后再执行逻辑
  if (name !== null) {
    console.log('name 已更新，可以执行后续操作', name);
  }
}, [name])

内容的提问来源于stack exchange，提问作者user15573857