React Native中异步数据获取函数为何仍返回Promise？该如何正确渲染数据

现存代码的直接错误点 #

• 渲染流程直接调用异步函数的逻辑完全错误：你在JSX渲染体中直接调用saveRenders()，这个async函数本身必然返回Promise，React的同步渲染流程根本不会等待Promise解析，不会自动把Promise的结果转换成可用的UI内容。同时你给.then()方法传入的是已经同步执行完的rednderSaves.map(...)结果，不是异步完成后要触发的回调函数，等于这个.then()根本没绑定任何有效逻辑，自然一直拿不到数据。
• 副作用逻辑的位置不对：读取AsyncStorage属于典型的组件副作用操作，按照React的规则，这类逻辑不应该放在渲染体中执行，必须放到useEffect Hook中，在组件挂载完成后触发，执行完成后通过setState更新状态，驱动UI重新渲染。
• 缺少异常和空值兜底：当AsyncStorage中没有对应存储值时，读取结果为null，直接传给JSON.parse虽然不会抛错，但如果存储值被篡改出现非法格式，会直接导致整个组件崩溃。同时循环中直接修改原数组的内容，不符合React不可变状态更新的原则。
• 列表渲染的key使用错误：你用Date.now()作为列表项的key，每次组件渲染都会生成全新的key，导致所有列表项被反复销毁重建，触发不必要的重渲染和性能问题。
• 另外你定义state的时候存在拼写错误：rednderSaves和对应的setter命名不统一，后续维护很容易出现变量名找不到的问题。

修正后的可运行代码 #

import React, { useEffect, useState } from 'react';
import { Text, AsyncStorage } from 'react-native';

const SaveList = () => {
  // 修正拼写后的状态变量
  const [renderSaves, setRenderSaves] = useState([]);
  // 增加加载标记，避免空状态闪烁
  const [isLoading, setIsLoading] = useState(true);

  // 组件挂载时执行一次异步读取逻辑
  useEffect(() => {
    const loadConnections = async () => {
      try {
        // 读取根层级的连接数据，做空值兜底
        const rawData = await AsyncStorage.getItem("connections");
        const connections = rawData ? JSON.parse(rawData) : [];
        
        // 处理每条数据的嵌套字段，生成新数组避免直接修改原数据
        const processedList = connections.map(item => {
          const rawNestedData = item.data;
          return {
            ...item,
            data: rawNestedData ? JSON.parse(rawNestedData) : null
          }
        });

        setRenderSaves(processedList);
      } catch (error) {
        console.log('存储读取失败', error);
      } finally {
        setIsLoading(false);
      }
    }

    loadConnections();
    // 空依赖数组代表仅在组件首次挂载时执行
  }, []);

  // 加载阶段展示提示
  if (isLoading) return <Text>正在加载存档...</Text>;

  // 列表渲染，key使用每条数据自带的唯一标识
  return (
    <>
      {renderSaves.map(save => (
        <Text key={save.id}>{save.name}</Text>
      ))}
    </>
  )
}

常见误区补充 #

React的渲染流程是纯同步的计算过程，不支持在渲染体中直接等待Promise完成。所有异步数据加载都要遵循「副作用钩子触发读取→读取完成后调用setState更新状态→基于新状态重新渲染UI」的流程，不要尝试在JSX里直接调用异步函数并绑定then逻辑，否则永远会碰到“始终返回Promise、拿不到实际值”的问题。

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