Блог

Недавно я начал изучать 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 и пытаюсь передать их в качестве реквизита в компонент содержимого. Все работает нормально, пока я не попытаюсь передать функцию handleChange() .

Должно быть, я делаю что-то не так. Любая помощь будет оценена.

Проблема здесь,

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

Когда вы используете функцию, отличную от массива, она привязывает this и другие вещи к своему собственному прототипу. Значение ur this.handleChange s this на самом деле относится к функции, а не к классу

Попробуйте использовать это,

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

поскольку функции со стрелками не привязываются this или какие-либо другие вещи. итак this , теперь следует обратиться к классу