javascript - 如何从推送对象数组中的组件调用函数？

Question

我有一个由 .push() 函数生成的文本组件数组:

handleWordPress = (i) => {
 this.setState({selectedWord: this.props.navigation.state.params.meanings[i]});
};
render() {
 const { params } = this.props.navigation.state;
 var words = [];
 var keys = Object.keys(params.meanings);
 for (var i = 0; i < keys.length; i++) {
  words.push(<Text style={{color: 'grey', padding: 10, fontSize: 20}} key={i} onPress={this.handleWordPress(i)}>{keys[i]} </Text>);
 }
 return (
  <ScrollView style={styles.container}>
    <Text>{words}</Text>
    <Br/>
    <Text style={{fontWeight: 'bold'}}>Tap on a word to see the meaning</Text>
    <Br/>
    <Text style={{fontSize: 40, fontWeight: '800'}}>{this.state.selectedWord}</Text>
  </ScrollView>
 )
}

问题是，如果数组中有 3 个项目，由于 for 语句，它总是呈现为 this.handleWordPress(4) 。我该如何解决这个问题？

Answer 1

只需在 for 循环中使用 let 而不是 var。
就像这样:

for (let i = 0; i < keys.length; i++) {
   words.push(<Text style={{color: 'grey', padding: 10, fontSize: 20}} key={i} onPress={this.handleWordPress(i)}>{keys[i]} </Text>);
}

这里有一个例子来看看 var 和 let 之间的区别:

var p$ = document.getElementById("p$");
var array = ["I", " am", " a", " boy"];


// Won't work whit var in first paragraph
// Takes only final i which will be the length of array
for (var i = 0; i < array.length; i++) {
  var time = i * 500;
  setTimeout(() => p1.textContent += array[i], time);
}

// Will work whit let in second paragraph perfectly
for (let i = 0; i < array.length; i++) {
  var time = i * 500;
  setTimeout(() => p2.textContent += array[i], time);
}

<p id="p1" style="background: beige;">with var:  </p>
<p id="p2" style="background: #fee;">with let:  </p>

---

编辑:(评论评论)
它之所以有效，是因为:

使用 var 声明的变量不是 for 循环 block 的本地变量，而是封闭函数作用域或全局作用域的本地变量。所以它在循环的每次迭代中都会更新。当计时器开始读取我的示例中的变量i时，它会发现i == array.length。

let 的工作方式有所不同。它对于封闭 block 来说是本地的(在我们的例子中是 for 循环 block )。 在每次迭代中，我们都会有一个新的 i 实例，并且所有实例都有不同的值。

在此处了解更多信息:let - JavaScript | MDN