单击按钮时反应本机不显示循环迭代次数

Question

对不起我的英语

我编写了一个函数，用于将 JSX 元素推送到数组中并返回：

import * as React from 'react';
import { View, Text } from 'react-native';
import { Button} from 'react-native-paper';

const buttonLoop = () => {
    const items = []
    for (var i = 1; i <= 2; i++) {
        items.push(<Button icon="camera" onPress={() => alert(i/* Problem is here*/)}>Loop {i/* It work true*/}</Button>)
    }

    return items;
}

您可以看到元素内部的 i 确实有效，并且为 Button1 显示 1，为 Button2 显示 2。 但是当我单击按钮时，两个按钮都显示“3”，我想为 Button1 显示“1”，为 Button2 显示“2”

在 JQuery 中我没有这个问题，为什么它不起作用，有什么解决方案？

Answer 1

这样想， 当您单击按钮时，您所指的 i 指向循环中值为 3 的按钮，因此解决此问题的方法是将 i 作为参数传递，如下所示

由于闭包而使用 var 时会发生这种情况，您必须使用 let 关键字。

const ButtonLoop = () => {
  const items = [];
  for (let i = 1; i <= 2; i++) {

    items.push(
      <Button icon="camera" onPress={() => alert(i)} title={i}>
        Loop {i}
      </Button>
    );
  }

  return items;
};