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>
        );
    }
}

注意：我使用arrow函数为delete函数提供组件范围。

我做错了什么？

错误：

    ×
←→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代码链接：Code

Answer 1

您的函数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

}

Answer 2

您可以添加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
        )

或者您可以像这样使用fat arrow function：

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}/>
}

为什么看不懂属性＆＃39; deleteModule＆＃39;未定义的？

2 个答案: