React Native 无唯一id的接口数据如何在FlatList中渲染

你需要解决的两个核心问题分别是keyExtractor配置、图片URI取值，以下是可直接运行的正确实现：

核心逻辑说明 #

• keyExtractor 配置：由于接口返回项没有固定唯一字段，可以用列表项的动态键名搭配数组索引拼接生成唯一key，只要列表不做高频的中间项插入/乱序操作，这个方案的稳定性完全满足使用需求。如果列表是纯静态、无动态变更，甚至可以直接用数组索引作为key。
• 图片URI取值：你之前直接把item传给uri是错误的——item是形如{photo1: "图片地址"}的对象，不是字符串地址，需要取出对象里存储的属性值才能用。因为每个对象的键名是photo+序号不固定，直接取对象的第一个属性值即可拿到图片地址。
• 额外注意：React Native的Image组件必须设置明确宽高，否则不会渲染；useEffect要加空依赖数组避免重复执行接口请求，setState是异步操作，更新后立刻打印state拿不到最新值。

完整实现代码 #

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

const Home = () => {
  const [portfolio, setPortfolio] = useState([]);

  const renderItem = ({ item }) => {
    // 取出当前对象存储的图片地址
    const imageUri = Object.values(item)[0];
    return (
      <View style={{ marginBottom: 12 }}>
        <Image
          source={{ uri: imageUri }}
          resizeMode="cover"
          // 必须设置宽高，否则图片不显示
          style={{ width: '100%', height: 220, borderRadius: 8 }}
        />
      </View>
    );
  };

  const keyExtractor = (item, index) => {
    const itemUniqueKey = Object.keys(item)[0];
    return `${itemUniqueKey}-${index}`;
  };

  useEffect(() => {
    // 替换为你实际的接口请求逻辑
    fetchYourApi()
      .then((result) => {
        setPortfolio(result.myImage);
      })
  // 空依赖数组，仅组件挂载时执行一次请求
  }, []);

  return (
    <ScrollView>
      <FlatList
        scrollEnabled={false}
        data={portfolio}
        renderItem={renderItem}
        keyExtractor={keyExtractor}
        contentContainerStyle={{ padding: 16 }}
      />
    </ScrollView>
  );
};

export default Home;

优化建议 #

• 如果可以协调后端修改接口，最好让返回的列表项统一结构：比如每个项自带id唯一字段，图片地址统一存在固定字段（如imageUrl），后续取值和key配置会更简洁，也能避免动态取键值的潜在问题。
• 如果列表后续会做动态增删、排序操作，不要单纯用数组索引作为key，否则可能出现渲染错位的问题，当前用「项键名+索引」的方案可以规避这个问题。

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