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],
    })
}