TypeError：无法读取未定义 React JS 的属性“handleClick”

Question

我是 React 的新手，我似乎无法弄清楚这一点。我正在尝试在线练习，当我尝试在我的子组件上传递事件时，我收到错误“无法读取未定义的属性'handleClick'”错误。这是我的代码。

import React from "react";

import TodoItems from "./TodoItems";

import TodoComponent from "./TodoComponent";

class App extends React.Component {

  constructor() {

    super();

    this.state = {

      todoanItem: TodoItems

    };

    this.handleClick = this.handleClick.bind(this);

  }

  handleClick(id) {

    this.setState(function(state) {

      const newstate = state.todoanItem.map(function(todo) {

        if (todo.id === id) {

          todo.complete = !todo.complete;

        }

        return todo;

      });

      return {

        todoanItem: newstate

      };

    });

  }

  render() {

    const theItems = this.state.todoanItem.map(function(item) {

      return (

        <TodoComponent

          key={item.id}

          item={item}

          handleClick={this.handleClick}

        />

      );

    });

    return <div>{theItems}</div>;

  }

}

export default App;

import React from "react";

class TodoComponent extends React.Component {

  render() {

    return (

      <div className="todo-items">

        <input

          type="checkbox"

          checked={this.props.item.completed}

          onChange={event => this.props.handleClick(this.props.item.id)}

        />

        <p>{this.props.item.todo}</p>

      </div>

    );

  }

}

export default TodoComponent;

Answer 1

您需要在函数中使用箭头render函数App：const theItems = this.state.todoanItem.map((item) => { // Here&nbsp; return (&nbsp; &nbsp; <TodoComponent&nbsp; &nbsp; &nbsp; key={item.id}&nbsp; &nbsp; &nbsp; item={item}&nbsp; &nbsp; &nbsp; handleClick={this.handleClick}&nbsp; &nbsp; />&nbsp; );});此外，在以下位置添加一个构造函数TodoComponent：constructor(props) {&nbsp;&nbsp; &nbsp; super(props);}