Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

Question

错误：未捕获类型错误：无法读取未定义的属性 'manageChange'

我也将方法绑定到 "this"。我什至尝试过箭头函数格式来定义 "manageChange"。还是不行。

请帮忙找出问题所在？代码：

 class App extends React.Component {
  constructor() {
    super();
    this.state = { todos: TodoData };
    this.manageChange = this.manageChange.bind(this);
  }

  manageChange(id) {
    console.log(id);
  }

  render() {
    const todoItems = this.state.todos.map(function (item) {
      return (<TodoItem key={item.id} items={item}
        handleChange={this.manageChange} />);
    }
    );
    return
    (
      <div className="app">
        {todoItems}
      </div>
    );
  }
}

Answer 1

地图功能有问题。在地图中使用箭头功能。如果您使用普通功能，它将拥有它自己的 this，它没有 manageChange 功能。

const todoItems=this.state.todos.map((item) =>
    {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
    }
);

Answer 2

错误不在您的 manageChange 函数的定义中。它在下面的代码中

const todoItems=this.state.todos.map(function(item)
                {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
                }
                );

您应该将其更改为以下内容并使用 arrow 函数来代替

const todoItems=this.state.todos.map((item) => 
                {
                   return (<TodoItem key={item.id} items={item} 
                    handleChange={this.manageChange}/>);
                }
                );

请注意arrow function和normal function的区别。箭头函数中的引用向下传递给 children.

所以当你这样定义它时； this 关键字作为 class 的引用传递给 this.manageChange，并且不是未定义的。

Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs

javascript

typeerror

reactjs

react-props