Question

我正在使用react native创建一个列表，每个元素都是可点击的。单击该元素时，它将导航到另一个场景，并根据单击的元素和“i”的值传递对象。

但是当点击一个元素时，它总是发送'i'结束的对象。这是有道理的。

 constructor(props) {
   super(props);

   this.state = {
     items: this.props.items
    };
  }

makeList() {
  var items = []
  for (var i = 0; i <3; i++) {
      items.push(
        <TouchableOpacity
        activeOpacity={0.6}
        onPress={() => this.sendItem(this.state.items[i])}>
            <View>this.state.items[i].name</View>
        </TouchableOpacity>
      )
  }
  return items;
}

render() {
  return (
    <View>
      {this.makeList()}
    </View>
  );
}

sendItem(item) {
  this.props.navigate(item);
}

因此，无论何时单击其中任何一个项目，它都会发送“四个”。

我如何解决这个问题，以便发送正确的对象？

谢谢！

Answer 1

var没有为循环的每次迭代创建一个新变量，因此您要改变相同的i变量。当循环结束时，i === 3，以及onPress回调看到的内容。您可以改为使用let。

for (let i = 0; i <3; i++) {

或者你可以避免循环。

const items = Array.from({length: 3}, (x, i) => {
  return <TouchableOpacity ... />;
});

使用“i”发送错误对象的React Native List onPress

1 个答案: