React Native如何访问Promise返回的JSON数组中的元素

你当前写法的核心问题是：fetching是异步函数，调用后返回的是Promise实例而非直接的数组结果，直接在JSX属性中拼接Promise对象只会得到[object Promise]的无效字符串，无法生成正确的图片URI。
你需要配合React的状态钩子和副作用钩子来处理异步请求结果，具体实现如下：

import { useState, useEffect } from 'react';
import { View, Image } from 'react-native';

export default function Display() {
  // 定义状态存储请求返回的数组
  const [dataArr, setDataArr] = useState([]);
  // 异步请求函数，保留你原有逻辑即可
  const fetching = async () => {
    // 这里替换为你实际的请求逻辑，最终返回数组结果
    const res = await 你的请求逻辑;
    return res;
  };

  // 组件挂载时触发异步请求
  useEffect(() => {
    const getArrData = async () => {
      const resultArr = await fetching();
      setDataArr(resultArr);
    };
    getArrData();
  }, []);

  return (
    <View>
      {/* 数组有值时才渲染图片，避免索引访问报错 */}
      {dataArr.length > 0 && (
        <Image 
          source={{uri: `http://imageURI.${dataArr[0]}.png`}}
          style={{height: 50, width: 50, borderRadius: 50}} 
        />
      )}
    </View>
  );
}

关键逻辑说明 #

• 用useState定义响应式状态存储异步请求得到的数组，状态更新后组件会自动重新渲染，即可在JSX中直接访问数组内的元素
• 用useEffect在组件挂载后触发异步请求，拿到返回的数组后更新状态
• 渲染图片前增加非空判断，避免数组还未请求完成时访问arr[0]出现索引越界错误
• React组件名首字母必须大写，所以原有display函数修改为Display

内容的提问来源于stack exchange，提问作者cel-0207