元素被推送到我的数组后发生变化 - React Native

Question

问题

当我在按钮导航功能中设置一个对象然后导航到新屏幕时，它输出了错误的数据。

代码

这是对我的问题的复制和过度简化。这是伪代码，不会工作，但它应该让您了解正在发生的事情。我没有 post 我的“真实”代码，因为它要复杂得多，我认为解释它会占用不必要的时间，但是如果它有帮助，请问我，我会把它给你。

var array = [];

for (var i = 0; i < 10; i++) {
  array.push(
    <button
      onPress={() => navigate('screen', {x:i} )}
      key={'img' + i}
      title={'click me'}
    />
    )
}

//after navigation to screen
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10
console.log(params.x);
//x:10

Answer 1

好的，问题是，"click" 发生在未来的某个时间，在用户交互之后。

for 循环在你的例子中创建了 onPress 回调函数——这里一切都很好。这里的问题是在新闻事件发生时，i 在每种情况下都等于 10。未绑定！

我将展示两个示例，尝试为您解释此问题的解决方案。

`for`循环

首先使用for循环并绑定i到回调函数。

const array = [];

for (var i = 0; i < 10; i++) {
  function bindIndex(boundIndex) {
    return {
      onPress: () => console.log(boundIndex)
    }
  }

  array.push(bindIndex(i))
}

array[5].onPress()

`Array.map`

在第二个示例中，创建了长度为 10 的数组并将其映射到已绑定索引的新数组中。

// Create array of length of N (10 in this case)
const arrOfN = Array.from(Array(10))

const array = arrOfN.map((value, index) => ({
  onPress: () => console.log(index)
}))

array[5].onPress()

选择最适合您的解决方案并相应地调整您的代码。

运行 example here

元素被推送到我的数组后发生变化 - React Native

Element changes after being pushed to my array - React Native

arrays

object

react-native

react-navigation

问题

代码

`for`循环

`Array.map`

元素被推送到我的数组后发生变化 - React Native

Element changes after being pushed to my array - React Native

arrays

object

react-native

react-navigation

问题

代码

for循环

Array.map

`for`循环

`Array.map`