React新手求助：点击删除按钮无法获取Tasks数组索引引用

刚学习React，尝试点击删除按钮从Tasks[]数组中删除列表项，但无法获取对应任务的引用。目前已添加删除按钮并能触发点击事件，但后续操作无法推进。

现有代码 #

App.js #

import React, { Component } from "react";
import Overview from "./OverView";
import uniqid from "uniqid";

class App extends Component {
  constructor() {
    super();
    this.deleteTask = this.deleteTask.bind(this);
    this.state = {
      task: {
        text: '', 
        taskno: 0,
        id: uniqid()
      },
      tasks: [],
    };
  }

  handleChange = (e) => {
    this.setState({
      task: {
        text: e.target.value,
        taskno: this.state.task.taskno,
        id: this.state.task.id,
      },
    });
  };
  deleteTask = (e) => {
    console.log(this.state.task.taskno)
    // 这里不知道怎么写删除逻辑
  };

  onSubmitTask = (e) => {
    e.preventDefault();
    this.setState({
      tasks: this.state.tasks.concat(this.state.task),
      
      task: {
        text: '',
        taskno: this.state.task.taskno + 1, 
        id: uniqid()
      },
    });
  };

  render() {
    const { task, tasks} = this.state;
    return (
      <div>
        <form onSubmit={this.onSubmitTask}>
          <label htmlFor="taskInput">Enter task</label>
          <input
            onChange={this.handleChange}
            value={task.text}
            type="text"
            id="taskInput"
          />
          <button type="submit">Add Task</button>
        </form>
        <Overview tasks={tasks} deleteTask={this.deleteTask} />
        
      </div>
    );
  }
}

export default App;

Overview.js #

import React from "react";

const Overview = (props) => {
  
  const { tasks,deleteTask} = props;

  return (
     
    <ul>
      {tasks.map((task) => {
        return(
        <div>
       <li key={task.id}>{task.taskno} : {task.text}   <button onClick={deleteTask}> Delete</button>  </li>
       
        </div>)
      })}
     
      
    </ul>
  
  );
};

export default Overview;

解决方法 #

1. 传递任务ID给删除函数 #

修改Overview.js中的删除按钮，点击时把当前任务的唯一id传递给deleteTask函数：

<button onClick={() => deleteTask(task.id)}> Delete</button>

2. 实现删除逻辑 #

修改App.js中的deleteTask方法，利用数组filter方法过滤掉对应id的任务，同时使用函数式更新确保获取最新的state：

deleteTask = (taskId) => {
  this.setState(prevState => ({
    tasks: prevState.tasks.filter(task => task.id !== taskId)
  }));
};

补充说明 #

• 每个任务通过uniqid生成了唯一id，用id作为判断依据比索引更可靠，避免数组元素变动后索引对应错误的问题。
• 使用函数式更新this.setState(prevState => {...})，是因为setState是异步操作，这样能确保我们基于最新的state来更新任务列表。

内容的提问来源于stack exchange，提问作者umer