React循环遍历对象并使用带参数的onClick函数渲染div

问题描述：

因此，我创建了一个循环，该循环遍历由googles gecoding api创建的对象。查找某些值并将其放入“结果列表”中，单个元素具有onClick函数。现在，当我使用bind执行onClick函数时，他们确实能够工作，当我用（）=>他们不这样做时。也许有人可以向我解释为什么这不起作用？React循环遍历对象并使用带参数的onClick函数渲染div

循环：

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。

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

答

它做变量瓢和关闭，对于类似的问题，看看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

所以基本上绑定使函数记住（它实际上返回一个带有参数集的新函数）变量的当前状态。当lamda在执行时查看变量。这就是为什么当你不使用绑定时你只能看到最后三个标签。

React循环遍历对象并使用带参数的onClick函数渲染div

相关推荐