Javascript 反应：作为道具传递的函数无法正常工作

我在react中编写了一个CRUD fullstack任务应用程序。它与nodejsapi挂钩。该应用程序应该允许用户添加任务、删除任务和更新任务，并在完成/不完成之间切换类

我已经设法让这个应用程序工作，但我目前正试图通过将其拆分为单独的组件来进行重构

重构前的工作示例

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import './styles/styles.scss';

class App extends React.Component {
  constructor() {
    super();
    this.handleAddTask = this.handleAddTask.bind(this);
    this.handleDeleteTask = this.handleDeleteTask.bind(this);
    this.handleToggleComplete = this.handleToggleComplete.bind(this);

    this.state = {
      tasks: []
    };
  }

  getTasks() {
    axios.get('http://localhost:3000/tasks')
      .then(response => {
        this.setState({ tasks: response.data });
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  handleAddTask(e) {
    e.preventDefault();
    const newTaskDescription = e.target.elements.task.value.trim();

    if(newTaskDescription.length) {
      axios.post('http://localhost:3000/tasks', {
        description: newTaskDescription
      }).then(() => {
        this.getTasks();
      });

      e.target.elements.task.value = '';
    }
  }

  handleDeleteTask(e) {
    e.preventDefault();
    const taskId = e.target.getAttribute('data-id');

    axios.delete(`http://localhost:3000/tasks/${taskId}`)
      .then(() => {
        this.getTasks();
      })
      .catch(function (error) {
        console.log(error);
      });
  }

  handleToggleComplete(e) {
    e.preventDefault();
    const taskId = e.target.getAttribute('data-id');
    const tasks = this.state.tasks;
    const taskIndex = tasks.findIndex(task => task._id === taskId);
    tasks[taskIndex].completed = !tasks[taskIndex].completed;

    this.setState(() => {
      return { tasks };
    }, () => {
      axios.put(`http://localhost:3000/tasks/${taskId}`, { completed: this.state.tasks[taskIndex].completed})
        .then(() => {
          this.getTasks();
        })
        .catch(function (error) {
          console.log(error);
        });
    });
  }

  componentDidMount() {
    this.getTasks();
  }

  render() {
    return (
      <div>
        <h1>Here is a list of Tasks</h1>

        <form onSubmit={this.handleAddTask}>
          <input type="text" name="task"/>
          <button>Add a task</button>
        </form>

        {this.state.tasks.length === 0 && <p>Please add a task to get started</p>}
        <ul>
          {
            this.state.tasks.map((task) => {
              return <li
                key={task._id}
                className={ task.completed ? 'completed' : '' }
              >
                {task.description}

                <form 
                  data-id={task._id} 
                  onSubmit={this.handleToggleComplete}
                >
                  <button>Toggle</button>
                </form>

                <form 
                  data-id={task._id} 
                  onSubmit={this.handleDeleteTask}
                >
                  <button>Delete</button>
                </form>
              </li>;
            })
          }
        </ul>

      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

问题是，在我将handleDeleteTask和handleToggleComplete函数作为道具向下传递后，当我尝试触发这些函数时，它会说

e.target.getAttribute（'data-id'）

未定义？但就我所知，我已经在组件中定义了数据id属性了吗

---

任何帮助调试这将不胜感激

在您的应用程序组件中，您正在将\u id作为id传递。但在您是任务组件的情况下，您访问了错误的道具

下面是正确的代码

const Task = (props) => {
  return (
    <div>
      {props.description}
      <form
        data-id={props.id}
        onSubmit={props.handleToggleComplete}
      >
        <button>Toggle</button>
      </form>

      <form
        data-id={props.id}
        onSubmit={ props.handleDeleteTask}
      >
        <button>Delete</button>
      </form>
    </div>
  );
};

const任务=（道具）=>{
返回(
{props.description}
切换
删除
);
};

如果您认为它解决了您的问题，请将其标记为正确答案。：）

0: {completed: false, _id: "5d4eeb8c8925d7368654559d", description: "skaksjakjjsa", __v: 0}
1: {completed: true, _id: "5d4eeb968925d7368654559f", description: "abcdefghijklmnop", __v: 0}
2: {completed: true, _id: "5d4f0de930952a4064afa954", description: "akjkjskjaka", __v: 0}
3: {completed: false, _id: "5d4f10ae2faf70425804a3c4", description: "sasas", __v: 0}
4: {completed: false, _id: "5d4f10b22faf70425804a3c5", description: "ksksksksk", __v: 0}
5: {completed: false, _id: "5d4f10b62faf70425804a3c6", description: "dgdgdgdgdg", __v: 0}
6: {completed: false, _id: "5d4f12792faf70425804a3c7", description: "alallalal", __v: 0}
7: {completed: false, _id: "5d4f12822faf70425804a3c8", description: "abcdefghijklmnop", __v: 0}

const Task = (props) => {
  return (
    <div>
      {props.description}
      <form
        data-id={props.id}
        onSubmit={props.handleToggleComplete}
      >
        <button>Toggle</button>
      </form>

      <form
        data-id={props.id}
        onSubmit={ props.handleDeleteTask}
      >
        <button>Delete</button>
      </form>
    </div>
  );
};