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

Question

问题

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

代码

这是我的问题的复制和过度简化。这是伪代码，不起作用，但它应该给出正在发生的事情的想法。我没有发布我的＆＃34;真实＆＃34;代码，因为它更复杂，我认为解释它会占用不必要的时间，但是如果它有用只是问我，我会把它给你。

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

好的，问题是，在用户互动之后的某个时间，“点击”会发生。

您的示例中的

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