React Native如何返回嵌套在另一数组内的JSON数组元素

你无法获取media.data数组下的url字段、图片不显示，通常由3个问题导致：

• 从返回结构判断后端为Strapi v4，这类框架默认不会返回嵌套关联的媒体字段，你发起请求时没有指定populate参数拉取media关联数据，media字段实际返回为null
• 直接链式读取media.data[0]没有做空值兜底，只要某一条数据没有关联上传媒体，就会触发"读取undefined属性"的JS错误，导致渲染中断
• React Native的Image组件必须显式设置宽高样式，即便拿到正确的url，没有尺寸配置也不会显示图片

1. 修正接口请求逻辑 #

请求接口时必须添加populate参数，指定要返回的关联字段，同时注意赋值给FlatList数据源的是接口返回结构里的内层data数组，不是整个响应体：

const [notes, setNotes] = useState([]);

const getListData = async () => {
  try {
    // 替换为你自己的接口地址，populate参数指定要拉取media、category关联数据
    const response = await fetch('你的业务接口地址?populate[0]=media&populate[1]=category');
    const result = await response.json();
    // 注意：只把内层的data数组赋值给notes，不要把整个result赋值进去
    setNotes(result.data || []);
  } catch (err) {
    console.log('拉取数据失败', err);
  }
}

// 页面加载时调用请求
useEffect(() => {
  getListData();
}, []);

2. 修正FlatList渲染逻辑 #

添加空值安全校验，给Image组件加上必填的尺寸样式，避免渲染报错、图片不显示：

<FlatList
  data={notes}
  renderItem={({ item }) => {
    // 可选链做逐层兜底，任意一层为空都不会报错
    const imageUrl = item?.attributes?.media?.data?.[0]?.attributes?.url;
    return (
      <View style={{ padding: 12 }}>
        <Text>Name: {item.attributes.name}</Text>
        <Text>可用性: {item.attributes.availability ? '在售' : '下架'}</Text>
        {imageUrl ? (
          <Image
            source={{ uri: imageUrl }}
            // 必须设置宽高，否则图片不会渲染，尺寸按你的业务需求调整
            style={{ width: 150, height: 150, marginTop: 8, borderRadius: 8 }}
          />
        ) : (
          <Text style={{ marginTop: 8, color: '#999' }}>无对应图片</Text>
        )}
      </View>
    )
  }}
  keyExtractor={item => String(item.id)}
/>

1. 先在数据赋值后打console.log打印单条notes数据，确认item.attributes.media下存在data数组且有url字段，如果media为null，优先检查接口的populate参数是否正确
2. 确认keyExtractor返回值为字符串类型，避免列表渲染警告
3. 确认Image组件的宽高样式已正确设置

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