任何人都知道如何在我从中删除 1 项后制作平面列表重置 ID 号
anyone know how to make a flatlist reset id number after I remove 1 item from it
正如我的标题所说，尽管下面是一个例子，但我对此很挣扎
{ id: '1', name: 'one' },
{ id: '2', name: 'two' },
{ id: '3', name: 'three' },
{ id: '4', name: 'four' },
这是我删除 ID 为“2”的项目后的平面列表，我希望 ID 3 变为 2，ID 4 变为 3，因此删除 ID 2 后的平面列表会像
{ id: '1', name: 'one' },
{ id: '2', name: 'three' },
{ id: '3', name: 'four' },
这是我的代码
export default function Listdata({ route }) {
const [itemData, newItem] = React.useState([]);
const [itemState, setItemState] = React.useState(itemData);
const [idmoi, incr,] = React.useState(1);
const [textNhapVao, setTextNhapVao] = React.useState('');
const tinhToanId = (t) => {
var idNew = [itemData.id];
incr(idNew - 1);
}
const themItem = () => {
var arrayMoi = [...itemData, { id: idmoi, name: textNhapVao }];
incr(idmoi + 1)
console.log('idddd')
console.log(idmoi)
setItemState(arrayMoi);
newItem(arrayMoi);
}
<View>
</View>
const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0
const xoaItem = (IItem) => {
console.log('routeeee')
console.log(route.params.paramKey)
setItemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== IItem));
}
return (
<Container style={styles.container}>
<View style={{
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: '#d7d7d7',
}}>
<Text style={{ fontWeight: 'bold', fontSize: 30, color: 'green' }}>Xin Chào {route.params.paramKey}</Text>
</View>
<FlatList
data={itemState}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ marginLeft: 20 }}>
<Text style={{ fontSize: 30, color: 'red' }} >{item.id}{'\n'}{item.name}</Text>
</View>
<View style={{ justifyContent: 'center', marginRight: 20 }}>
<TouchableOpacity
style={{
width: '100%',
backgroundColor: 'red',
}}
activeOpacity={0.7}
onPress={() => xoaItem(index)}
>
<IconFE name='trash-2' size={30} style={{ color: 'orange' }} />
</TouchableOpacity>
</View>
</View>
)}
/>
<View
style={{
position: 'relative', height: 50,
borderTopWidth: 1,
borderColor: '#d7d7d7',
}}>
<KeyboardAvoidingView enabled behavior={Platform.OS === "ios" ? "padding" : null} keyboardVerticalOffset={keyboardVerticalOffset} >
<View
style={{
alignItems: 'center', position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 20,
marginRight: 20,
}}>
<Input
onChangeText={data => setTextNhapVao(data)}
placeholder='Nhập Vào Đây'></Input>
<TouchableOpacity
title="Thêm"
onPress={themItem}>
<IconFE name='check-square' size={30} style={{ color: 'blue' }} />
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
</Container>
)
}
下面是我的截图 flatlist：https://uphinh.org/image/9OLoCN
您可以使用一个函数来删除给定索引处的对象。
该函数获取删除的数组，在开始处获取对象并获取 id 然后它从索引循环直到结束并更新所有 id 属性。
const
remove = (array, index) => {
let removed = array.splice(index, 1);
if (!removed.length) return array;
let id = +removed[0].id;
while (index < array.length) array[index++].id = (id++).toString();
return array;
},
data = [{ id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: 'four' }];
remove(data, 1);
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }
你可以轻松实现这个结果
- 使用 findIndex
查找要删除的元素的索引
- 然后把数组分成两半
- 第二个数组解析为
int后加1。
- 入阵
- 如果元素不在
arr. 中，请务必覆盖边角大小写
const arr = [
{ id: "1", name: "one" },
{ id: "2", name: "two" },
{ id: "3", name: "three" },
{ id: "4", name: "four" },
];
function resetIds(arr) {
return arr.map((o) => {
return { ...o, id: `${parseInt(o.id) - 1}` };
});
}
const id = "2";
const elementToRemoveIndex = arr.findIndex((o) => o.id === id);
const result =
elementToRemoveIndex !== -1
? [
...arr.slice(0, elementToRemoveIndex),
...resetIds(arr.slice(elementToRemoveIndex + 1)),
]
: [...arr];
console.log(result);
据我了解你的 id 没有继续（1,2,3...），因为如果是这样，你根本不需要改变 id，你可以使用array 索引代替。无论如何，如果你假设 id 不继续，我们可以尝试以下算法：
- 查找删除索引，
- 将元素
n 映射到 n+1 以获取高于删除索引的索引，
- 删除最后一个元素（这将是我们最后的删除项，已被推到最后）。
代码示例：
const data = [
{ id: '1', name: 'one' },
{ id: '2', name: 'two' },
{ id: '5', name: 'five' },
{ id: '6', name: 'six' }]
const removeFromArr = (arr, name) => {
const removeIdx = arr.findIndex(e => e.name === name)
return arr.map((e, i, a) => removeIdx <= i ? ({...e, name: a?.[i + 1]?.name}) : e) // map element n to n+1 if higher than remove idx
.slice(0, arr.length - 1) // remove last item
}
const newData = removeFromArr(data, "two")
console.log(newData)
.as-console-wrapper { max-height: 100% !important; top: 0; }
从提供的数组中通过找到索引的拼接方法删除所选数组
工作示例：https://snack.expo.io/@msbot01/137768
import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions, FlatList} from 'react-native';
export default class SupervisorDashboard extends Component<Props> {
constructor(props) {
super(props);
this.state = {
userData:[
{id:1, name:"One"},
{id:2, name:"Two"},
{id:3, name:"Three"},
{id:4, name:"Four"},
{id:5, name:"Five"},
{id:6, name:"Six"},
]
}
}
componentDidMount(){
}
removeItem(index){
this.state.userData.splice(index, 1);
var array = []
// console.log(JSON.stringify(this.state.userData))
for(var i=0; i< this.state.userData.length; i++){
var eachElement = {id: (i+1), name: this.state.userData[i].name }
array.push(eachElement)
}
console.log(JSON.stringify(array))
this.setState({})
}
renderItem(item, index){
// console.log(item.id)
return(
<View style={{height:60, width:'90%', marginTop:10, marginLeft:'5%', marginRight:'5%', flexDirection:'row', justifyContent:'space-between', alignItems:'center', borderRadius:10, borderWidth:1, borderColor:'#ececec', padding:10}}>
<Text>{item.id}</Text>
<Text>{item.name}</Text>
<TouchableOpacity onPress={()=>{this.removeItem(index)}} style={{marginRight:10, backgroundColor:'grey', height:'100%', justifyContent:"center", borderRadius:10, padding:10}}>
<Text>Click to remove</Text>
</TouchableOpacity>
</View>
)
}
render(){
return(
<View style={{flex:1, backgroundColor:'white'}}>
<FlatList
data={this.state.userData}
renderItem={({ item, index })=>this.renderItem(item, index)}
keyExtractor={item => item.id}
/>
</View>
);
}
}
const styles = StyleSheet.create({
background: {
backgroundColor: 'red'
}
});
正如我的标题所说，尽管下面是一个例子，但我对此很挣扎
{ id: '1', name: 'one' },
{ id: '2', name: 'two' },
{ id: '3', name: 'three' },
{ id: '4', name: 'four' },
这是我删除 ID 为“2”的项目后的平面列表，我希望 ID 3 变为 2，ID 4 变为 3，因此删除 ID 2 后的平面列表会像
{ id: '1', name: 'one' },
{ id: '2', name: 'three' },
{ id: '3', name: 'four' },
这是我的代码
export default function Listdata({ route }) {
const [itemData, newItem] = React.useState([]);
const [itemState, setItemState] = React.useState(itemData);
const [idmoi, incr,] = React.useState(1);
const [textNhapVao, setTextNhapVao] = React.useState('');
const tinhToanId = (t) => {
var idNew = [itemData.id];
incr(idNew - 1);
}
const themItem = () => {
var arrayMoi = [...itemData, { id: idmoi, name: textNhapVao }];
incr(idmoi + 1)
console.log('idddd')
console.log(idmoi)
setItemState(arrayMoi);
newItem(arrayMoi);
}
<View>
</View>
const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0
const xoaItem = (IItem) => {
console.log('routeeee')
console.log(route.params.paramKey)
setItemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== IItem));
}
return (
<Container style={styles.container}>
<View style={{
alignItems: 'center',
justifyContent: 'center',
borderBottomWidth: 1,
borderColor: '#d7d7d7',
}}>
<Text style={{ fontWeight: 'bold', fontSize: 30, color: 'green' }}>Xin Chào {route.params.paramKey}</Text>
</View>
<FlatList
data={itemState}
keyExtractor={(item, index) => index}
renderItem={({ item, index }) => (
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ marginLeft: 20 }}>
<Text style={{ fontSize: 30, color: 'red' }} >{item.id}{'\n'}{item.name}</Text>
</View>
<View style={{ justifyContent: 'center', marginRight: 20 }}>
<TouchableOpacity
style={{
width: '100%',
backgroundColor: 'red',
}}
activeOpacity={0.7}
onPress={() => xoaItem(index)}
>
<IconFE name='trash-2' size={30} style={{ color: 'orange' }} />
</TouchableOpacity>
</View>
</View>
)}
/>
<View
style={{
position: 'relative', height: 50,
borderTopWidth: 1,
borderColor: '#d7d7d7',
}}>
<KeyboardAvoidingView enabled behavior={Platform.OS === "ios" ? "padding" : null} keyboardVerticalOffset={keyboardVerticalOffset} >
<View
style={{
alignItems: 'center', position: 'relative',
flexDirection: 'row',
justifyContent: 'space-between',
marginLeft: 20,
marginRight: 20,
}}>
<Input
onChangeText={data => setTextNhapVao(data)}
placeholder='Nhập Vào Đây'></Input>
<TouchableOpacity
title="Thêm"
onPress={themItem}>
<IconFE name='check-square' size={30} style={{ color: 'blue' }} />
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</View>
</Container>
)
}
下面是我的截图 flatlist：https://uphinh.org/image/9OLoCN
您可以使用一个函数来删除给定索引处的对象。
该函数获取删除的数组，在开始处获取对象并获取 id 然后它从索引循环直到结束并更新所有 id 属性。
const
remove = (array, index) => {
let removed = array.splice(index, 1);
if (!removed.length) return array;
let id = +removed[0].id;
while (index < array.length) array[index++].id = (id++).toString();
return array;
},
data = [{ id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' }, { id: '4', name: 'four' }];
remove(data, 1);
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }
你可以轻松实现这个结果
- 使用 findIndex 查找要删除的元素的索引
- 然后把数组分成两半
- 第二个数组解析为
int后加1。 - 入阵
- 如果元素不在
arr. 中，请务必覆盖边角大小写
const arr = [
{ id: "1", name: "one" },
{ id: "2", name: "two" },
{ id: "3", name: "three" },
{ id: "4", name: "four" },
];
function resetIds(arr) {
return arr.map((o) => {
return { ...o, id: `${parseInt(o.id) - 1}` };
});
}
const id = "2";
const elementToRemoveIndex = arr.findIndex((o) => o.id === id);
const result =
elementToRemoveIndex !== -1
? [
...arr.slice(0, elementToRemoveIndex),
...resetIds(arr.slice(elementToRemoveIndex + 1)),
]
: [...arr];
console.log(result);
据我了解你的 id 没有继续（1,2,3...），因为如果是这样，你根本不需要改变 id，你可以使用array 索引代替。无论如何，如果你假设 id 不继续，我们可以尝试以下算法：
- 查找删除索引，
- 将元素
n映射到n+1以获取高于删除索引的索引， - 删除最后一个元素（这将是我们最后的删除项，已被推到最后）。
代码示例：
const data = [
{ id: '1', name: 'one' },
{ id: '2', name: 'two' },
{ id: '5', name: 'five' },
{ id: '6', name: 'six' }]
const removeFromArr = (arr, name) => {
const removeIdx = arr.findIndex(e => e.name === name)
return arr.map((e, i, a) => removeIdx <= i ? ({...e, name: a?.[i + 1]?.name}) : e) // map element n to n+1 if higher than remove idx
.slice(0, arr.length - 1) // remove last item
}
const newData = removeFromArr(data, "two")
console.log(newData)
.as-console-wrapper { max-height: 100% !important; top: 0; }
从提供的数组中通过找到索引的拼接方法删除所选数组
工作示例：https://snack.expo.io/@msbot01/137768
import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions, FlatList} from 'react-native';
export default class SupervisorDashboard extends Component<Props> {
constructor(props) {
super(props);
this.state = {
userData:[
{id:1, name:"One"},
{id:2, name:"Two"},
{id:3, name:"Three"},
{id:4, name:"Four"},
{id:5, name:"Five"},
{id:6, name:"Six"},
]
}
}
componentDidMount(){
}
removeItem(index){
this.state.userData.splice(index, 1);
var array = []
// console.log(JSON.stringify(this.state.userData))
for(var i=0; i< this.state.userData.length; i++){
var eachElement = {id: (i+1), name: this.state.userData[i].name }
array.push(eachElement)
}
console.log(JSON.stringify(array))
this.setState({})
}
renderItem(item, index){
// console.log(item.id)
return(
<View style={{height:60, width:'90%', marginTop:10, marginLeft:'5%', marginRight:'5%', flexDirection:'row', justifyContent:'space-between', alignItems:'center', borderRadius:10, borderWidth:1, borderColor:'#ececec', padding:10}}>
<Text>{item.id}</Text>
<Text>{item.name}</Text>
<TouchableOpacity onPress={()=>{this.removeItem(index)}} style={{marginRight:10, backgroundColor:'grey', height:'100%', justifyContent:"center", borderRadius:10, padding:10}}>
<Text>Click to remove</Text>
</TouchableOpacity>
</View>
)
}
render(){
return(
<View style={{flex:1, backgroundColor:'white'}}>
<FlatList
data={this.state.userData}
renderItem={({ item, index })=>this.renderItem(item, index)}
keyExtractor={item => item.id}
/>
</View>
);
}
}
const styles = StyleSheet.create({
background: {
backgroundColor: 'red'
}
});