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

Question

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

我查看了这些资源，了解如何在 react 中处理删除数组中的项目。

• How to remove item in todo list using React
• Removing element from array in component state
• React Binding Patterns

我尝试更改处理程序在 TodoList 和 TodoItemLIst 中的调用方式，这会导致处理程序在单击时不触发。我尝试了绑定处理程序的不同方法 - 添加参数对它没有影响 -bind(this) 会破坏它并且没有必要，因为我正在使用函数。

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

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

Answer 1

在 deleteTodoItem 方法中，尝试一下

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

并删除对splice()的调用。