javascript - ReactJS webpack babel : _this2 is undefined when clicking button whose function is passed via a parameter

Question

毫无疑问，我在这里错过了一些非常明显的东西，但我正在尝试做 lynda 教程“学习 React.js”，它有点不同，因为我使用 ES6 类并通过 webpack 使用 Babel 进行转译。

问题是执行一个函数作为参数从 Board 类传递给 Note 类。

我有一个“Note”类，可以描述为:

remove() {
    this.props.onRemove(this.props.id);
}
//Notes class
render() {
    return (
        <div className="note">
            <p>{this.props.children}</p>
            <span>
                <button onClick={() => this.remove() }>X</button>
            </span>
        </div>
    );
}

其中 onRemove 是一个作为 props 从 Board 传递到 Note 的函数，如下所示:

//Method in Board class. I map through an array and call this function on each element to create notes.
eachNote(note) {
    return (
        <Note key = { note.id } id = { note.id } onRemove = { (id) => this.remove(id) }>
            { note.note }
        </Note>
    )
}

Board 类中的remove() 方法如下所示:

//Remove method in the Board class
remove(id) {
    let notes = this.state.notes.filter(note => note.id !== id);
    this.setState({notes});
} 

当我单击 Note 的 X 按钮时，它会执行 note 类中的本地函数，但不会执行作为属性传递的方法 (onRemove())，而是得到 (Firefox):

TypeError: _this2 is undefined

在 Chrome 中我得到:

Cannot read property 'remove' of undefined

我不明白为什么它找不到该函数，我之前做了一个教程，它正是这样做的，并且能够正常找到该函数。我可能忽略了一些非常简单的事情。

[编辑:额外的主板信息]

//Board's render method
render() {
    return (
        <div className='board'>
            { this.state.notes.map(this.eachNote) }
        </div>
    );
}

在控制台中它输出我期望的内容。

Answer 1

经过一个下午的尝试，我想展示我的解决方案，以防其他人遇到这个问题。

我的渲染方法是通过注释数组进行映射并从每个元素进行创建。问题是我没有将“notes”对象传递给创建 note 元素的函数。所以我通过将渲染方法更改为以下内容来修复它:

render() {
    return (
        <div className='board'>
            { this.state.notes.map((note) => this.eachNote(note)) }
        </div>
    );
}

我不确定，但我认为这是可行的，因为每个 Note 实例都有自己的 this 。如果有人有更好的解释请告诉我。