Я получаю TypeError: это не определено даже после использования this.handleChange = this.handleChange.bind (this) в конструкторе - PullRequest
Новая
       23

Я получаю TypeError: это не определено даже после использования this.handleChange = this.handleChange.bind (this) в конструкторе

1 голос
/ 24 мая 2019

Я получаю ошибку «TypeError: this is undefined» даже после того, как я связываю это с функцией в конструкторе.Я также пытался использовать handleChange={this.handlChange.bind(this)} вместо this.handleChange = this.handleChange.bind(this), но это не работает.Я смотрю учебник по React и написал тот же код, что и у преподавателя, код отлично работает в его IDE, но показывает ошибку в моем.

index.js 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Приложение.js 

import React from 'react';
import './css/App.css';
import Header from "./components/Header"
import MainContent from "./components/MainContent"
import Footer from "./components/Footer"

class App extends React.Component {

  render(){
      return (

        <div>
          <Header />
          <MainContent />

          <Footer />
        </div>
    )
  }
}

export default App;

MainContent.js 

import React, {Component} from "react"
import ListItem from "./ListItem"
import tasks from "./tasks"

class MainContent extends Component
{
    constructor()
    {
        super()
        this.state = 
        {
            tasks: tasks
        }
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange(completed)
    {
        alert(completed)
    }

    render() 
    {
            const taskComponents = this.state.tasks.map(function(data)
            {
                return <ListItem key={data.id} task={data.task} completed={data.completed} handleChange={this.handleChange} />
            })
            return (
            <div>
                {taskComponents}
            </div>
            )
        }   
}

ListItem.js 

import React from "react"
let i=1;

class ListItem extends React.Component
{

    render()
    {
        return (
            <div>
                <p style={{color : i%2 ? "black" : "orange"}}>
                    <input type="checkbox" checked={this.props.completed} 
                        onChange={function(){
                            this.props.handleChange(this.props.completed)
                        }}>
                    </input> Task {i++} : <b>{this.props.task}</b> 
                </p>
            </div>
            )
    }
}

export default ListItem
...