自动增量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>
)