Javascript react js delete处理程序删除数组中的第一个索引

问题是，单击任何项按钮都会删除数组中的第一个索引项

在react中处理删除数组中的项时，我查看了这些资源

我已尝试更改在TodoList和TodoItemLIst中调用我的处理程序的方式，这会导致处理程序在单击时不启动。我尝试了不同的绑定处理程序的方法-添加一个参数对它没有影响-bindthis会破坏它&这不是必需的，因为我使用的是一个函数

我尝试过使用过滤器方法以不同的方式设置状态。没有变化发生

this.setState((prevState) => ({
    todoItems: prevState.todoItems.filter(i => i !== index)
}));

我不明白问题出在哪里/什么地方

class App extends Component {
constructor(props) {
super(props);

this.state = { 
  value: '',
  listItemValue: props.value || '',
  todoItems:  [
    {id: _.uniqueId(), item: 'Learn React.'},
    {id: _.uniqueId(), item: 'Improve JS skills.'},
    {id: _.uniqueId(), item: 'Play with kittens.'}
  ]
};
}

handleChange = (event) => {
let value = event.target.value;
this.setState({
  value: this.state.value,
  listItemValue: value
});
}

handleSubmit = (event) =>{
event.preventDefault();

this.setState({
  value: '',
  listItemValue: ''
});
}

addTodoItem = () => {
let todoItems = this.state.todoItems.slice(0);

  todoItems.push({
    id: _.uniqueId(),
    item: this.state.listItemValue
  });

  this.setState(prevState => ({
    todoItems: [
        ...prevState.todoItems,
        {
          id: _.uniqueId(),
          item: this.state.listItemValue
        }]
  }))
};

deleteTodoItem = (index) => {
let todoItems = this.state.todoItems.slice();
todoItems.splice(index, 1);

this.setState({ 
  todoItems
});
}

render() {

return (
  <div className="App">
    <h1>Todo List</h1>
    <TodoListForm name="todo"
                  onClick={ ()=>this.addTodoItem() }
                  onSubmit={ this.handleSubmit }
                  handleChange={ this.handleChange }
                  value={ this.state.listItemValue } />
    <TodoList onClick={ ()=>this.deleteTodoItem() }
              todoItems={ this.state.todoItems }/>
  </div>
);
}
}

const TodoList = (props) => {
const todoItem = props.todoItems.map((todo) => {
   return (
    <TodoListItem  onClick={ props.onClick }  
                   key={ todo.id }
                   id={ todo.id }
                   item={ todo.item }/>
   );
});
return (
<ul className="TodoList">
    {todoItem}
</ul>
);
}

const TodoListItem = (todo, props) => {
return (

    <li className="TodoListItem">
        <div className="TodoListItem__Item">{todo.item}
        <span className="TodoListItem__Icon"></span>
        <button onClick={ todo.onClick } 
                type="button" 
                className="TodoListItem__Btn">&times;</button>
        </div>
    </li>
)
};

---

在deleteTodoItem方法中，尝试

let todoItems = this.state.todoItems.slice(0, -1);

---

并删除对splice的调用。

在deleteTodoItem方法中，尝试“让todoItems=this.state.todoItems.slice0，-1；”在addTodoItems中，您可以使用concat来避免使用slice。请参阅，使用断点和开发工具应该很容易解决这个问题。@Nick就是这样。非常感谢。