自动增量 ID FlasList React Native

Question

我想添加一个具有自动递增 ID 的列，我的 json 对象没有属性：'id' 来做这件事很容易，所以我不知道该怎么做

<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 }) => (
                        <View style={styles.listWrapper}>
                            <Text style={styles.row}>ID</Text>
                            <Text style={styles.row}>{item.name}</Text>
                            <Text style={styles.row}>{item.address}</Text>
                        </View>
                    )}
                />
            )}
</View>

所以当我渲染我的项目时，我的第一列应该是自动上升

1  |  item.name  |  item.address
2  |  item.name  |  item.address
3  |  item.name  |  item.address

完整的代码，如果这很重要：

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 }) => (
                        <View style={styles.listWrapper}>
                            <Text style={styles.row}>ID</Text>
                            <Text style={styles.row}>{item.name}</Text>
                            <Text style={styles.row}>{item.name}</Text>
                        </View>
                    )}
                />
            )}
        </View>
    )
}

Answer 1

renderItem 也返回一个索引，这就是你想要的？

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</Text>
                            <Text style={styles.row}>{item.name}</Text>
                            <Text style={styles.row}>{item.name}</Text>
                        </View>
                    )}
                />
            )}
        </View>

    )