循环遍历数组然后重新给数组的每一项赋id值 求各位大神看一眼吧！！！

#1

我想要实现一个对数组的删除功能 是根据存在state里面的数组的id值删除的 但是删除了以后 其他的记录的id值不会改变 所以就导致再点击删除别的记录的时候 会删除的不是我点击的那一条 还是个react小白 想不出解决办法了 求助大神们 谢谢啦 代码附上

this.state={
   visible:false,
    showChangeVisible :false,
   list:[
     {
           id:'0',
           subname:'语文',
           teacher:'Wang',
           hours:'24'
         },
           {
             id:'1',
             subname:'数学',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'2',
             subname:'英语',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'3',
             subname:'物理',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'4',
             subname:'化学',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'5',
             subname:'生物',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'6',
             subname:'政治',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'7',
             subname:'历史',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'8',
             subname:'地理',
             teacher:'Wang',
             hours:'24'
           },
           {
             id:'9',
             subname:'计算机',
             teacher:'Wang',
             hours:'24'
           },],
     total:null,
   };

删除方法如下

// 删除
handleDelete = (id) => {
  const list = this.state.list;
  debugger
    list.splice(id, 1);
    this.setState ({
      list : list,
     })
};

然后点击按钮删除我是这么写的，用的antd 的Table组件来显示数据

const columns=[{
  title:'课程题目',
  dataIndex:'subname',
  id:'subname',
},
{
  title:'任课教师',
  dataIndex:'teacher',
  key:'teacher',
},
{
  title:'总课时',
  dataIndex:'hours',
  key:'hours',
},
{
  title:'操作',
  key:'action',
  render:(text,record)=>(
    <span>
      <Button onClick={this.showChangeModal.bind(null,record)} type="primary">修改</Button>
        <ChangeForm
          visible={this.state.showChangeVisible}
          onCancel={this.handleChangeCancel}
          onChangeItem={this.handleChange}
          record={record}
        />
    <Divider type="vertical"/>
    <Button onClick={this.handleDelete.bind(null,record.id)} type="primary">删除</Button>
    </span>
    )
},];
#2

record.id是id值，在这里不能作为索引值，所以删除的时候，就不能用splice(id,1) ,可以循环判断id值是否相等来删除

#3

您好，我有点儿不太明白 我这里是删除成功了的 只是删除完成以后 被删除元素以后的id值不会改变 导致再进行删除操作就会删错行 用您的方法可以避免这种错误是吗？
this.setState({list:list.filter(({ id }) => id !== id)});
这样写？我还没验证

#4

比如你第一次删除了 id7历史 ，第二次你再次点击 id8时 ，此时的 id8已经占据了 id7的位置，所以，删除的不是id8.
你可以用id是否相等来判断删除哪个。或者你可以在 this.handleDelete.bind(null,record.id) 时record.id换成index

#5

谢谢您 我做出来了
list.splice(list.findIndex( v => v.id === id),1); 这样就可以了

#6

嗯嗯 按照您跟楼上的说的 用判断id是否相等的方法做出来了 非常感谢