Почему не удается прочитать свойство 'deleteModule' из неопределенного?

Question

Я пытаюсь передать функцию DeleteModule на два уровня вниз.Так что я передаю этот другой компонент внутри карты в качестве реквизита.Хотя я сделал привязку в конструкторе, компилятор все равно выдает ошибку, как указано ниже.

Я попытался добавить привязку, например: this.deleteModule = this.deleteModule.bind (this) внутри функции renderListOfModules.Тогда тоже не сработало.

Кто-нибудь может указать, что пошло не так в моем коде?

import React from 'react';
import '../../node_modules/bootstrap/dist/css/bootstrap.css';

import  ModuleListItem from '../components/ModuleListItem';

export default class ModuleList extends React.Component{


    constructor(props) {
        super(props);
        this.state = {
            module: { title: '' },
            modules: [
                {id: 1, title: "JQuery"},
                {id: 2, title: "React"},
                {id: 3, title: "Redux"},
                {id: 4, title: "Angular"},
                {id: 5, title: "Node"}
            ]
        }
        this.titleChanged = this.titleChanged.bind(this);
        this.createModule = this.createModule.bind(this);
        this.deleteModule = this.deleteModule.bind(this);


    }

    titleChanged(event) {
        console.log(event.target.value);
        this.setState({module: {title: event.target.value, id : this.state.modules.length +1}});

    }

    createModule(){
        this.setState(
            { modules : this.state.modules.concat(this.state.module)});
        this.setState({module: {title: ""}});


    }

        deleteModule=(index)=>{
            console.log("index to remove : " + index);
            if (index > -1) {
                this.setState(
                    { modules : this.state.modules.splice(index, 1) });
            }

            // /api/module/61
            // module_id actual
        }



    editModule(index,title,  updated){
        console.log("Edit module ");
        console.log("index          : " + index);
        console.log("title          : " + title);
        console.log("updated        : " + updated);


        if (index > -1 && index  <  this.state.modules.length) {
            this.setState(
                { modules : this.state.modules.splice(index, 1) });
        }


        // to api :

        //courseid
        //title
        // updatedAt:



    }


    renderListOfModules(){
        let index = -1;


        let modules = this.state.modules.map(function(module) {
                index++;
                return <ModuleListItem
                    key={module.id}
                    id={index}
                    index={index}
                    title={module.title}
                    inEditMode={false}
                    deleteModule={this.deleteModule}/>
            }
        )

    return modules

    }

    render(){
        return(
            <div>
                <input className="form-control"
                       onChange={this.titleChanged}
                       placeholder="title"
                       value={this.state.module.title}/>
                <button
                    className="btn btn-primary btn-block"
                    onClick={this.createModule}>

                    <i className="fa fa-plus"></i>
                </button>
        <ul className="list-group">

                {this.renderListOfModules()}
            </ul>
            </div>
        );
    }
}

Примечание. Я использую функцию стрелки, чтобы дать функции удаления область действия компонента.

Что такоеЯ делаю не так?

Ошибка:

    ×
←→1 of 2 errors on the page
TypeError: Cannot read property 'deleteModule' of undefined
(anonymous function)
src/container/ModuleList.js:91
  88 |             index={index}
  89 |             title={module.title}
  90 |             inEditMode={false}
> 91 |             deleteModule={this.deleteModule}/>
  92 |     }
  93 | )
  94 | 

Ссылка на код Github: Код

Answer 1

Вы можете добавить this в качестве второго аргумента, например:

let modules = this.state.modules.map(function(module) {
                index++;
                return <ModuleListItem
                    key={module.id}
                    id={index}
                    index={index}
                    title={module.title}
                    inEditMode={false}
                    deleteModule={this.deleteModule}/>
            }, this
        )

Или вы можете просто использовать функцию жирной стрелки , например:

let modules = this.state.modules.map((module) => {
    index++;
    return <ModuleListItem
    key={module.id}
    id={index}
    index={index}
    title={module.title}
    inEditMode={false}
    deleteModule={this.deleteModule}/>
}

Answer 2

Ваша функция renderListOfModules () и ваш обратный вызов карты не связаны, поэтому вы не передаете область действия компонента и не сможете получить доступ к функциям, объявленным в нем.Вы должны связать их или объявить их как функции стрелок:

renderListOfModules = () => {
    let index = -1;


    let modules = this.state.modules.map((module) => {
            index++;
            return <ModuleListItem
                key={module.id}
                id={index}
                index={index}
                title={module.title}
                inEditMode={false}
                deleteModule={this.deleteModule}/>
        }
    )

return modules

}