在 React Native 中使用FlatList组件实现自动递增的 ID。
代码示例:
在构造函数中使用state来存储数据源和ID计数器:
constructor(props) {
super(props);
this.state = {
data: [
{ id: 1, name: 'John' },
{ id: 2, name: 'Jane' }
],
idCount: 3
};
}
在 renderItem 函数中渲染数据项时,将ID计数器的值赋值给当前数据项的ID:
renderItem = ({ item }) => {
return (
{item.id}. {item.name}
);
};
在添加新的数据项时,将ID计数器的值赋给新数据项的ID:
addData = () => {
const { data, idCount } = this.state;
const newData = { id: idCount, name: 'New Item' };
this.setState({
data: [...data, newData],
idCount: idCount + 1
});
};
最终渲染 FlatList 组件:
item.id.toString()}
/>
当新数据项被添加时,ID计数器自动递增,确保新数据项ID唯一且递增。