在尝试执行以下代码时变得不确定

Question

TypeError：无法读取未定义的属性“ bind”

遇到此错误，请帮助我。

我试图在发生onchange事件时选中并取消选中该复选框

请在此处找到代码 https://codesandbox.io/s/competent-mendeleev-cd881

Answer 1

在渲染中，您应确保声明为函数updated code

Answer 2

循环中的休止符this将更改当前对象的上下文。

将this分配给另一个变量，并改用该变量。

self在这种情况下：

See solution here

Answer 3

尝试在渲染器中添加一个常量引用this，如下所示：

import React from "react";
import todosData from "./TodoData";
import ToDoItems from "./ToDoItems";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: todosData
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(id) {
    this.setState(prevState => {
      const updateTodo = prevState.todos.map(todo => {
        if (todo.id === id) {
          todo.completed = !todo.completed;
        }
        return todo;
      });
      return {
        todos: updateTodo
      };
    });
  }
  render() {
    const that = this;
    const todoData = this.state.todos.map(function(item) {
      return (
        <ToDoItems key={item.id} item={item} handleChange={that.handleChange} />
      );
    });
    return <div>{todoData}</div>;
  }
}
export default App;

Answer 4

ToDoItems.js 中的
1. 错字-props.handlehange
2. 由于this中的上下文不同，您需要将map分配给变量 功能
3. 通过item.id函数中的handleChange()来跟踪待办事项。
   
   这是更新的solution。