React Native FlatList无内置id字段时如何添加自增序号列

解决方法 #

FlatList 官方提供的 renderItem 回调参数自带当前元素的下标 index，不需要依赖接口返回的ID属性，直接用这个下标生成自增序号即可，下标默认从0开始，想要从1开始展示直接加1即可。

方式一：直接在渲染时取index生成（最简便，适合仅展示序号的场景） #

修改你的FlatList部分的renderItem参数，解构出index，替换原来写死的ID文本即可：

<FlatList
    data={data}
    keyExtractor={(item, index) => String(index)}
    renderItem={({ item, index }) => (
        <View style={styles.listWrapper}>
            {/* 下标从0开始，+1 就得到1开头的自增序号 */}
            <Text style={styles.row}>{index + 1}</Text>
            <Text style={styles.row}>{item.name}</Text>
            <Text style={styles.row}>{item.address}</Text>
        </View>
    )}
/>

方式二：拿到接口数据时提前注入序号属性（适合后续逻辑也需要用到序号的场景） #

如果你在其他业务逻辑里也需要用到这个序号，可以在请求到数据的时候就给每个对象插入序号属性，修改getObjects方法即可：

const getObjects = async () => {
    try {
        const response = await fetch(url);
        const json = await response.json();
        // 遍历给每个元素加自增序号属性
        const dataWithSerialId = json.data.map((item, idx) => ({
            ...item,
            serialId: idx + 1
        }))
        setData(dataWithSerialId);
    } catch (error) {
        console.error(error);
    } finally {
        setLoading(false);
    }
}

之后渲染的时候直接取item.serialId即可：

<Text style={styles.row}>{item.serialId}</Text>

注意：如果你的列表存在动态插入/删除元素、分页加载的场景，方式一的序号会随着元素变动重新计算，如果需要固定序号请用方式二在数据初始化的时候注入唯一序号。

修改后的完整业务代码 #

export default function FlowMeter({navigation}) {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    const getObjects = async () => {
        try {
            const response = await fetch(url);
            const json = await response.json();
            setData(json.data);
        } catch (error) {
            console.error(error);
        } finally {
            setLoading(false);
        }
    }

    useEffect(() => {
        getObjects();
    }, []);


    return (
        <View style={styles.body}>
            <View style={styles.listWrapper}>
                <Text style={styles.row}>№</Text>
                <Text style={styles.row}>Название</Text>
                <Text style={styles.row}>Значение</Text>
            </View>
            {isLoading ? <ActivityIndicator/> : (
                <FlatList
                    data={data}
                    keyExtractor={(item, index) => String(index)}
                    renderItem={({ item, index }) => (
                        <View style={styles.listWrapper}>
                            <Text style={styles.row}>{index + 1}</Text>
                            <Text style={styles.row}>{item.name}</Text>
                            <Text style={styles.row}>{item.address}</Text>
                        </View>
                    )}
                />
            )}
        </View>
    )
}

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