javascript - 通过对象进行 react 循环并使用带有参数的 onClick 函数渲染 div

Question

所以我创建了一个循环，它遍历由 googles gecoding api 创建的对象。查找某些值并将它们放入“结果列表”中，单个元素具有 onClick 函数。现在，当我使用 bind 执行 onClick 函数时，它们确实有效，而当我使用 () => 执行 onClick 函数时，它们则不起作用。也许有人可以向我解释为什么这不起作用？

循环:

renderResults: function(){
  var status = this.state.data.status;
  var results = this.state.data.results;
  var ok = (status === 'OK' ? true : false);

  if (!status) {
    return <div> </div>
  } 
  if (!ok) {
    return <div className="searchresults">Error, we couldn't find a match</div>
  }

  if (status && ok){
    var size = Object.keys(results).length

    console.log(this.state.data);
    var validation_messages = this.state.data.results;
    ///* Get properties *///
    var resul =[];
    for (var key in validation_messages) {
      console.log("####### " + key + " #######");
      // skip loop i the property is from prototype
      if (!validation_messages.hasOwnProperty(key)) continue;

      var label1 = '';
      var label2 = '';

      var obj = validation_messages[key];
      console.log(obj);
      for (var prop2 in obj.address_components) {
        if(!obj.address_components.hasOwnProperty(prop2)) continue;
        var obj3 = obj.address_components[prop2];
        if (obj3.types.indexOf('locality') !== -1) {
          label1 = obj3.long_name;
        }
        if (obj3.types.indexOf('country') !== -1) {
          label2 = obj3.long_name;
        }
    }
    var lat = obj.geometry.location.lat;
    var lng = obj.geometry.location.lng;
    var placeid = obj.place_id;
    var label3 = lat.toFixed(3) + "°N / " + lng.toFixed(3)  + "°E";

    console.log('label1: '+label1);
    console.log('label2: '+label2);
    console.log('label3: '+label3);
    console.log('lat: ' + lat);
    console.log('lng: ' + lng);
    console.log('id: ' + placeid);
    console.log(validation_messages[key].formatted_address);


    resul.push(<div className="results" onClick={this.pushlabels.bind(this, label1, label2, label3)} >{label3}</div>);

  }
  console.log(resul);
  return resul;

}

所以这有效:

resul.push(<div className="results" onClick={this.pushlabels.bind(this, label1, label2, label3)} >{label3}</div>);

这不起作用:

resul.push(<div className="results" onClick={() => this.pushlabels(label1,label2,label3)} >{label3}</div>);

不工作是什么意思？如果我采用的版本不起作用，那么我只会从循环中的最后一个对象中推送 label1、label2、label3。

所以现在我想知道为什么？

Answer 1

它与变量 scoop 和闭包有关，对于类似的问题，请查看 javascript scope problem when lambda function refers to a variable in enclosing loop

这是一个简短的程序，说明了发生的情况:

function foo(first, second){
 console.log(first + " : " + second)
}
var x = "x";
let bar = () => {foo("bar", x)}
let baz = foo.bind(this,"baz", x)
bar()
baz()
x = "y"
bar()
baz()

//Output:
//bar : x
//baz : x
//bar : y
//baz : x

所以基本上，bind 使函数记住(它实际上返回一个设置了参数的新函数)变量的当前状态。 lamda 在执行时查看变量。这就是为什么当您不使用绑定(bind)时您只能看到最后三个标签。