React toDoApp 删除任务功能不起作用

Question

我是 React 的新手，正在尝试制作一个 toDoApp。 我正在尝试创建一个 onClick 事件以从任务 state 中删除一个元素。但它似乎不起作用。 我还可以问一下如何实现 id 键，以便我可以删除我想要的所需任务吗？

 import React from 'react'; import './App.css'; class App extends React.Component { constructor(){ super(); this.state = { value: '', tasks: [] }; this.handleChange = this.handleChange.bind(this) this.addItem = this.addItem.bind(this) this.removeItem = this.removeItem(this) } handleChange(event) { this.setState({ value: event.target.value }) } addItem(){ if(this.state.value === ''){ alert('Enter a task.') } else { const newTask = [...this.state,tasks. this.state.value] this:setState({ tasks, newTask: value. '' }) } } removeItem(){ this.state.tasks.pop() this:setState({ tasks. this.state,tasks. }) } render(){ const itemList = this.state.tasks;map((num) => <li>{num}</li> ). return( <div> <input type="text" value={this.state.value} onChange={this.handleChange}></input> <button onClick={this.addItem}>+</button> <button onClick={this.removeItem}>-</button> <ul>{itemList}</ul> {this.state;tasks} </div> ) } } export default App;

强文本

Answer 1

pop()删除最后一个元素，但 React 不会重新渲染组件，因为使用相同的数组调用setState 。 您可以创建一个新数组并将其用于更新 state。

removeItem() {
    this.state.tasks.pop()
    this.setState({
      tasks: [...this.state.tasks],
    })
}