未捕获的类型错误：无法读取 reactjs 中未定义的属性“类函数”答案

【问题标题】：Uncaught TypeError: Cannot read property 'class function' of undefined in reactjs未捕获的类型错误：无法读取 reactjs 中未定义的属性“类函数”
【发布时间】：2019-10-15 21:29:04
【问题描述】：

错误：未捕获的类型错误：无法读取未定义的属性“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>
    );
  }
}

【问题讨论】：

标签： javascript reactjs react-props typeerror

【解决方案1】：

错误不在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 的区别。箭头函数中的引用向下传递给子级。

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

【讨论】：

感谢您的解释。对 ES6 和 React 来说非常新，因此会造成混乱。
乐于助人。您可以在此处阅读有关 ES6 功能的更多信息。 http://es6-features.org.

【解决方案2】：

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

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

【讨论】：