如何遍历AsyncStorage返回的列表？React异步操作问题排查

1. 修复fetchValues函数的返回值问题 #

你的fetchValues函数未返回获取到的数据，导致await后拿不到结果。修改后让它返回解析后的数据，同时处理数据不存在或报错的场景：

const fetchValues = async () => {
    try {
      const storedData = await AsyncStorage.getItem("@registration");
      // 存储数据不存在时返回空数组，避免后续渲染报错
      return storedData ? JSON.parse(storedData) : [];
    } catch (err) {
      console.log("error in list getting: ", err);
      // 出错时也返回空数组，保证渲染流程正常
      return [];
    }
};

2. 修正useEffect的异步写法 #

useEffect的回调不能直接是async函数（async函数会返回Promise，而useEffect仅允许返回清理函数或undefined）。需在useEffect内部定义异步函数并调用：

// 初始值设为空数组，避免map遍历时报错
const [data, setData] = React.useState([]);

React.useEffect(() => {
  // 内部定义异步函数
  const loadRegistrationData = async () => {
    const registrations = await fetchValues();
    setData(registrations);
  };
  // 执行异步函数
  loadRegistrationData();
}, []); // 空依赖数组，确保组件挂载时仅执行一次

3. 完成列表渲染 #

直接使用data数组遍历渲染，注意key的取值（若数据无唯一key字段，可组合startTime与endTime作为唯一标识）：

return (
  <View>
    {data.map((item) => (
      <View key={`${item.startTime}-${item.endTime}`}>
        <Text style={styles.itemStyle}>{item.startTime}</Text>
      </View>
    ))}
  </View>
);

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