Javascript 有人知道如何在我从平面列表中删除1项后创建平面列表重置id号吗

就像我的标题所说的，尽管下面是一个例子，但我仍在努力解决这个问题

{ 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>
    )
}

导出默认函数Listdata（{route}）{
const[itemData，newItem]=React.useState（[]）；
const[itemState，setItemState]=React.useState（itemData）；
常量[idmoi，incr，]=React.useState（1）；
const[textNhapVao，setTextNhapVao]=React.useState（“”）；
常数tinhToanId=（t）=>{
var idNew=[itemData.id]；
增量（idNew-1）；
}
常数项=（）=>{
var arrayMoi=[…itemData，{id:idmoi，name:textNhapVao}]；
增量（idmoi+1）
console.log（'idddd'）
console.log（idmoi）
setItemState（arrayMoi）；
新项目（arrayMoi）；
}
const keyboardVerticalOffset=Platform.OS=='ios'？40:0
常数xoaItem=（IItem）=>{
console.log（'routeee'）
console.log（route.params.paramKey）
setItemState（PreviItemState=>PreviItemState.filter（（\u item，\u Index）=>u Index！==IItem））；
}
返回(
Xin Cháo{route.params.paramKey}
索引}
renderItem={（{item，index}）=>(
{item.id}{'\n'}{item.name}
xoaItem（索引）}
>
)}
/>
setTextNhapVao（数据）}
占位符ập VáoĐy'>
)
}

---

下面是我的屏幕截图平面列表：

您可以使用一个函数来删除给定索引处的对象

函数获取移除的数组，在开始时获取对象并获取

id

，然后从索引循环到结束，并更新所有

id

属性

const
删除=（数组、索引）=>{
let removed=阵列拼接（索引1）；
如果（！removed.length）返回数组；
让id=+删除[0].id；
而（index
.as console wrapper{max height:100%！important；top:0；}
您可以使用一个函数删除给定索引处的对象

函数获取移除的数组，在开始时获取对象并获取
id
，然后从索引循环到结束，并更新所有
id
属性


const
删除=（数组、索引）=>{
let removed=阵列拼接（索引1）；
如果（！removed.length）返回数组；
让id=+删除[0].id；
而（index
。作为控制台包装{max height:100%！important；top:0；}
您可以轻松实现此结果


使用查找要删除的元素的索引
然后将数组分成两半
在第二个数组解析为
int
后，将其添加到第二个数组中
加入阵列
如果元件不在
arr
中，请确保盖住角盒


const arr=[
{id:“1”，name:“1”}，
{id:“2”，name:“2”}，
{id:“3”，name:“3”}，
{id:“4”，name:“4”}，
];
功能重置ID（arr）{
返回arr.map（（o）=>{
返回{…o，id:`${parseInt（o.id）-1}`；
});
}
const id=“2”；
常量元素ToRemoveIndex=arr.findIndex（（o）=>o.id==id）；
常数结果=
elementToRemoveIndex！==-1.
? [
…arr.slice（0，元素到移动索引），
…重置ID（arr.slice（elementToRemoveIndex+1）），
]
：[…啊]；
控制台日志（结果）您可以轻松实现此结果


使用查找要删除的元素的索引
然后将数组分成两半
在第二个数组解析为
int
后，将其添加到第二个数组中
加入阵列
如果元件不在
arr
中，请确保盖住角盒


const arr=[
{id:“1”，name:“1”}，
{id:“2”，name:“2”}，
{id:“3”，name:“3”}，
{id:“4”，name:“4”}，
];
功能重置ID（arr）{
返回arr.map（（o）=>{
返回{…o，id:`${parseInt（o.id）-1}`；
});
}
const id=“2”；
常量元素ToRemoveIndex=arr.findIndex（（o）=>o.id==id）；
常数结果=
elementToRemoveIndex！==-1.
? [
…arr.slice（0，元素到移动索引），
…重置ID（arr.slice（elementToRemoveIndex+1）），
]
：[…啊]；
控制台日志（结果）
据我所知，您的
id
是不连续的（
1,2,3…
），因为如果是这样，您根本不需要变异
id
，您只需使用
数组
索引即可。无论如何，如果您假定
id
不是continued，我们可以尝试以下算法：


查找并删除索引
对于高于删除索引的索引，将元素
n
映射到
n+1
删除最后一个元素（这将是我们最后一个删除项目，已推到最后）。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'
  }
});