Javascript 如何从react列表中删除元素并维护索引？

我试图从react上的列表中删除元素，但我发现实现这一点的方法需要分配一个键来访问元素。我正在使用列表中的索引，但是当我从中间删除一个项目时，它总是最后一个消失的项目。我怎样才能解决这个问题

这就是我删除元素的方式（我已经记录了结果，一切正常）：

这就是我在列表中循环的方式：

  get_task_list(){
    let task_list = [];

    if(this.state && this.state.tasks){
      for (var i = 0; i < this.state.tasks.length; i++) {
        task_list.push((
          <TaskItem
            key={i}
            index={i}
            handle_delete={this.handle_delete_elem}
            value={this.state.tasks[i].text}>
          </TaskItem>
        ));
      }
    }
    return task_list;
  }

获取任务列表（）{
让任务列表=[]；
if（this.state&&this.state.tasks）{
for（var i=0；i

我通过使用扩展运算符解决了这个问题。 我对您的代码进行了一些重构：

class List extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: [1,2,3,4,5]
        }
        this.get_task_list = this.get_task_list.bind(this);
        this.handle_delete_elem = this.handle_delete_elem.bind(this);
    }
    handle_delete_elem(index){
        let newArray = [ 
            ...this.state.arr.slice(0, index),
            ...this.state.arr.slice(index+1, this.state.arr.length)
        ];
        this.setState({
            arr: newArray
        });
   }
   get_task_list(){
    if(this.state && this.state.arr){
       return this.state.arr.map( (arrItem, index) => (
          <ListItem
            key={index}
            arrItem={arrItem}
            id={index}
            onClick={this.handle_delete_elem}
            />
        ));
    }
  }
  render(){
    return(
        <ul>{this.get_task_list()}</ul>
    )
  }
}

const ListItem = (props) => (
        <li onClick={() => props.onClick(props.id)}>{props.arrItem}</li>
);

类列表扩展了React.Component{
构造函数（）{
超级（）；
此.state={
arr:[1,2,3,4,5]
}
this.get\u task\u list=this.get\u task\u list.bind（this）；
this.handle\u delete\u elem=this.handle\u delete\u elem.bind（this）；
}
句柄删除元素（索引）{
设newArray=[
…this.state.arr.slice（0，索引），
…this.state.arr.slice（索引+1，this.state.arr.length）
];
这是我的国家({
arr:newArray
});
}
获取任务列表（）{
if（this.state&&this.state.arr）{
返回此.state.arr.map（（arrItem，index）=>(
));
}
}
render（）{
返回(
{this.get_task_list（）}
)
}
}
常量列表项=（道具）=>(
props.onClick（props.id）}>{props.arrItem}
);

---

在fiddle中检查此项：

通过代码片段或codesandbox提供一个最小的工作示例。来自TaskItem组件的handle\u delete回调中可能有错误，发送了错误的index@AshKander不，不是，发送的索引是正确的，我已经检查过了！这很好，但是你能解释一下为什么这样做吗？

class List extends React.Component{
    constructor(){
        super();
        this.state = {
            arr: [1,2,3,4,5]
        }
        this.get_task_list = this.get_task_list.bind(this);
        this.handle_delete_elem = this.handle_delete_elem.bind(this);
    }
    handle_delete_elem(index){
        let newArray = [ 
            ...this.state.arr.slice(0, index),
            ...this.state.arr.slice(index+1, this.state.arr.length)
        ];
        this.setState({
            arr: newArray
        });
   }
   get_task_list(){
    if(this.state && this.state.arr){
       return this.state.arr.map( (arrItem, index) => (
          <ListItem
            key={index}
            arrItem={arrItem}
            id={index}
            onClick={this.handle_delete_elem}
            />
        ));
    }
  }
  render(){
    return(
        <ul>{this.get_task_list()}</ul>
    )
  }
}

const ListItem = (props) => (
        <li onClick={() => props.onClick(props.id)}>{props.arrItem}</li>
);