javascript - 组件 onPress 函数内的渲染按钮显示最后一个 i。 React-Native

Question

我正在尝试从 redux 加载包含数组的组件(在示例中为 test)。我能够创建按钮并拥有正确的标题，但是 onPress 函数未显示正确的值

//expected outcome when press button "a"
0
//Outcome
2

class Test extends React.Component {
    render() {
        var buttons = []
        for (var i = 0; i < this.props.test.length; i++) { // this.props.test = ["a","b"]
            buttons.push(
                <Button
                    title={this.props.test[i]}
                    onPress={() => console.log(i)}
                />
            )
        }
        return (
            <View>
                {buttons}
            </View>
        );
    }
}

Answer 1

您需要定义let而不是var

for (let i = 0; i < this.props.test.length; i++) { // this.props.test = ["a","b"]
            buttons.push(
                <Button
                    title={this.props.test[i]}
                    onPress={() => console.log(i)}
                />
            )
        }

var 之间的主要区别 和 let 是， let 不是函数作用域，而是 是 block 作用域的。这意味着使用 let 创建的变量 关键字在创建它的“ block ”以及任何嵌套 block 中可用。当我说“ block ”时，我指的是任何被大括号 {} 包围的东西。 就像在 for 循环或 if 语句中一样。

为了更好地理解范围。访问https://tylermcginnis.com/var-let-const/

尝试使用map()功能

export default class Test extends React.Component {
  state={value:0}
  handleClick=id=>{
    this.setState({value:id})
  }
    render() { 
        let buttons;
        buttons = this.props.test.map(te=>
        <Button
            key={te}
            title={te}
            onPress={() => this.handleClick(te)}
          />
        )
        return (
            <View>
                {buttons}
                <Text>{this.state.value}</Text>
            </View>
        );
    }
}