为什么 id 变量在我的待办事项列表删除组件的反应代码中未定义？

Question

import React, { Component } from 'react';

export default class Todo extends Component {
  constructor() {
    super();
    this.state = {
      tasks: [
        { id: 1, task: 'CHECK MAILS' },
        { id: 2, task: 'READ ARTICLE' },
      ],
      currentTask: '',
    };
  }
  handleChange = (e) => {
    this.setState({
      currentTask: e.target.value,
    });
  };
  handleSubmit = () => {
    this.setState({
      tasks: [...this.state.tasks, { task: this.state.currentTask, id: this.state.tasks.length + 1 }],
      currentTask: '',
    });
  };
  handleDelete = () => {
    let narr = this.state.tasks.filter((taskObj) => {
      return taskObj.id != id;
    });
    this.setState({
      tasks: [...narr],
    });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.currentTask} onChange={this.handleChange} />
        <button onClick={this.handleSubmit}>SUBMIT</button>
        <ul>
          {this.state.tasks.map((taskObj) => (
            <li>
              {' '}
              <div key={taskObj.id}>
                <p>{taskObj.task}</p>
                <button onClick={() => this.handleDelete(taskObj.id)}>DELETE</button>
              </div>
            </li>
          ))}
        </ul>
      </div>
    );
  }
}

Here in this code error is coming that id is undefined in line 35(return taskObj.id;= id; ). I am not able to resolve the error. Since I have defined id in tasks array then also it is showing error. I am making a todo list using react.

Answer 1

You need to pass the id as a parameter of the function like this:

handleDelete = (id) => {

instead of:

handleDelete = () => {