Question

React.JS 无法读取数组循环内的属性

2015-07-25

2018

javascript reactjs

我有以下代码。

 var ImageList = React.createClass({
 getComponent: function(index){
      console.log(index);
 },
render: function() {
var results = this.props.data;
return (
  <div className="row">
    {results.map(function(result) {
      return(
              <a className="th medium-3 columns" href="#" onClick=  {this.getComponent.bind(this, 1)}>
                <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";"  + "base64," + result.image} />
              </a>
      )      
    })}
  </div>
);
}
});

第二个返回函数基本上循环显示一个图像数组。我希望单击时 OnClick 事件应触发 getComponent 方法。但是，如果 OnClick 事件在数组循环内，则会引发以下错误：

Uncaught TypeError: Cannot read property 'getComponent' of undefined.

但是，如果我使用相同的代码，即使在循环函数之后也只需添加 onClick ，如下所示：

 var ImageList = React.createClass({
 getComponent: function(index){
      console.log(index);
 },
render: function() {
var results = this.props.data;
return (
  <div className="row">
    {results.map(function(result) {
      return(
              <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";"  + "base64," + result.image} />
      )      
    })}
    <a className="th medium-3 columns" href="#" onClick=  {this.getComponent.bind(this, 1)}>
  </div>
);
}
});

最终工作正常。但由于我只需要为每个图像保留一个唯一的 ID，然后我才能完成 getComponent 的剩余功能，第二种方法对我来说没什么用。因此，有没有办法让它在循环中工作？

Answer 1

您的范围在 .map 方法内发生变化：

{results.map(function(result) {
    // `this` is different inside this anonymous function
})}

您要做的就是使用 ES6 的胖箭头语法，它会自动创建一个具有相同范围的匿名函数，或者将当前范围存储在变量中：

ES6 胖箭头（在此处阅读更多信息）：

render: function() {
    var results = this.props.data;
    return (
      <div className="row">
        {results.map( (result) => {
            return(
                <a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}>
                    <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";"  + "base64," + result.image} />
                </a>
            )
        })}
      </div>
    );
    }
});

请注意，您需要一个转译器（例如 babel.io）将其更改为浏览器当前可以理解并运行的 ES2015。这被认为是“最佳实践”，因为 ES6/7 为 JS 带来了更好的功能。

存储对此的引用：

render: function() {
    var results = this.props.data,
        that = this;
    return (
      <div className="row">
        {results.map(function(result) {
            return(
                <a className="th medium-3 columns" href="#" onClick={that.getComponent.bind(that, 1)}>
                    <img alt="Embedded Image" key={result.id} src={"data:" + result.type + ";"  + "base64," + result.image} />
                </a>
            )
        })}
      </div>
    );
    }
});

Answer 2

您可以使用 ES6 箭头函数自动保留此上下文：

results((result) => { ... })

或者仅将 this 作为第二个参数传递给 map ：

results(function(result) { ... }, this)