将函数作为道具传递时的ReactJS错误

编程问答 2022-06-10

问题描述

最近，我开始在教程的帮助下学习ReactJS，但遇到一个错误，我自己找不到解决方案。我决定要做的第一个项目之一是待办事项列表，当尝试将“ handleChange”功能作为对我的组件的支持时，出现此错误TypeError: Cannot read property 'handleChange' of undefined。

这是我的App类的完整代码，因此您可以看到我正在尝试做的事情：

import React from 'react';
import './App.css';
import Content from "./Content"
import TodoItems from "./TodoItems"

class App extends React.Component {

  constructor() {
    super()
    this.state = {
      items: TodoItems
    } 
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange() {
    console.log("Change!")
  }

  render() {
    const items = this.state.items.map(function(item){
      return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>)
    })
    return (
      <div>
        {items}
      </div>
    )
  }
}

export default App;

我正在从名为TodoItems的文件中获取数据，并尝试将它们作为道具传递到Content组件中。一切正常，直到我尝试通过handleChange（）函数为止。

我一定做错了。任何帮助将不胜感激。

解决方法

问题出在这里

const items = this.state.items.map(function(item){
      return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>)
    })

当您使用非数组函数时，它将this和其他内容绑定到其自己的原型中。意思是您的this.handleChange的{​​{1}}实际上是指函数，而不是类

尝试使用它，

this

，因为Arrow函数不会绑定const items = this.state.items.map((item) => { // ^^^^^^^^^^^ return (<Content key={item.id} todo={item.item} checked={item.completed} handleChange={this.handleChange}/>) }) 或任何其他东西。因此this现在应该引用该类

htmljavascriptjsxjsxreactjsreactjs