Question

我正在编写一个React脚本，它将从之前定义的数组中呈现一堆<a />个元素。

...
render:
...
    var behaviourComponents = this.props.myObjectArray.map(function(element) {
                    return <a className="crumbFile" onClick={this._myFunction.bind(this,element.value1)}>{element.value2}</a>;
                });
    return (
...
<div>{behaviourComponents}</div>
...)

当onClick没有函数调用时，这很好用。但是，当我收到错误时：“未捕获的TypeError：无法读取未定义的属性'_myFunction'。”

这是特别奇怪的，因为我之前有一个组件，onClick函数调用工作正常（<a class="btn header" style={buttonStyle} onClick={this._onLoad}>Load</a>），这让我觉得这是一个由于map（）函数引起的范围问题。但是，我使用了.bind（），所以我不太清楚这里有什么问题。

Answer 1

这是因为传递给map()的函数内部的上下文并不是指您的React组件类。默认情况下，上下文是全局Window对象。

有几种方法可以解决这个问题：

1）将this的正确上下文绑定到传递给map()的函数。

this.props.myObjectArray.map(function(element) {
    ...
}.bind(this));

2）将正确的上下文作为第二个参数传递给map()

this.props.myObjectArray.map(function(element) {
    ...
}, this);

3）使用ES6箭头功能，它将为您绑定正确的上下文。

this.props.myObjectArray.map(element => {
    ...
});

反应onClick事件产生：“未捕获的TypeError：无法读取未定义的属性”，尽管绑定

1 个答案: