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

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 是块范围的。这意味着使用 创建的变量let 关键字在创建它的“块”以及任何嵌套块中可用。当我说“块”时，我的意思是任何被花括号包围的东西 {} 就像在 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>
        );
    }
}