自动递增 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 一个索引，所以这就是您想要的？

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>

    )

自动递增 ID FlasList React Native

Auto Increment ID FlasList React Native

mobile

reactjs

react-native

react-table