React Native中点击座位时如何获取对应座位编号？

问题根源 #

你遇到的问题是**var声明的循环变量作用域导致的闭包陷阱**：
用var i声明的变量是函数级作用域，循环中每个TouchableOpacity的onPress回调都是闭包，它们共享同一个i的引用。当循环结束时，i的值已经变成了totalseat + 1（循环退出条件是i <= totalseat），所以所有座位点击都会拿到这个最终值。

另外还要注意：原代码中isActive == i的判断错误，因为isActive是数组（通过setIsActive往数组里push元素），应该用isActive.includes(i)来判断座位是否被选中。

解决方案 #

方案1：将var替换为let（最简单） #

let是块级作用域，每次循环都会创建一个独立的i变量，每个回调捕获的都是当前循环的i值。修改seat函数中的循环部分：

function seat(totalseat, seatcost, seatname) {
  var seats = [];
  // 把var改成let
  for (let i = 1; i <= totalseat; i++) {
    seats.push(
      i % 5 ? (
        <TouchableOpacity
          key={i}
          style={isActive.includes(i) ? styles.activeseat : styles.seat}
          onPress={() => handleClick(i, seatcost, seatname)}
        >
          <Text style={{ fontSize: 10 }}>{i}</Text>
        </TouchableOpacity>
      ) : (
        <TouchableOpacity
          key={i}
          style={
            isActive.includes(i)
              ? { ...styles.activeseat, marginRight: 30 }
              : { ...styles.seat, marginRight: 30 }
          }
          onPress={() => handleClick(i, seatcost, seatname)}
        >
          <Text style={{ fontSize: 10 }}>{i}</Text>
        </TouchableOpacity>
      )
    );
  }
  // 替换原有的i为固定key，避免let导致的i未定义问题
  if (totalseat != 0) {
    seats.push(
      <View
        key="spacer"
        style={{ backgroundColor: "white", height: 20, width: "100%" }}
      ></View>
    );
  }
  return seats;
}

方案2：用Array.from替代for循环（更符合React写法） #

直接生成座位编号数组，用map遍历生成元素，彻底避免循环闭包问题：

function seat(totalseat, seatcost, seatname) {
  // 生成1到totalseat的数组
  const seatNumbers = Array.from({ length: totalseat }, (_, idx) => idx + 1);
  
  const seats = seatNumbers.map(i => {
    return i % 5 ? (
      <TouchableOpacity
        key={i}
        style={isActive.includes(i) ? styles.activeseat : styles.seat}
        onPress={() => handleClick(i, seatcost, seatname)}
      >
        <Text style={{ fontSize: 10 }}>{i}</Text>
      </TouchableOpacity>
    ) : (
      <TouchableOpacity
        key={i}
        style={
          isActive.includes(i)
            ? { ...styles.activeseat, marginRight: 30 }
            : { ...styles.seat, marginRight: 30 }
        }
        onPress={() => handleClick(i, seatcost, seatname)}
      >
        <Text style={{ fontSize: 10 }}>{i}</Text>
      </TouchableOpacity>
    );
  });

  if (totalseat !== 0) {
    seats.push(
      <View
        key="spacer"
        style={{ backgroundColor: "white", height: 20, width: "100%" }}
      ></View>
    );
  }
  return seats;
}

方案3：立即执行函数（兼容旧环境） #

如果无法使用let，可以用立即执行函数封装当前i的值，形成独立作用域：

function seat(totalseat, seatcost, seatname) {
  var seats = [];
  for (var i = 1; i <= totalseat; i++) {
    // 用IIFE保存当前i的值
    (function(currentI) {
      seats.push(
        currentI % 5 ? (
          <TouchableOpacity
            key={currentI}
            style={isActive.includes(currentI) ? styles.activeseat : styles.seat}
            onPress={() => handleClick(currentI, seatcost, seatname)}
          >
            <Text style={{ fontSize: 10 }}>{currentI}</Text>
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            key={currentI}
            style={
              isActive.includes(currentI)
                ? { ...styles.activeseat, marginRight: 30 }
                : { ...styles.seat, marginRight: 30 }
            }
            onPress={() => handleClick(currentI, seatcost, seatname)}
          >
            <Text style={{ fontSize: 10 }}>{currentI}</Text>
          </TouchableOpacity>
        )
      );
    })(i);
  }
  
  if (totalseat != 0) {
    seats.push(
      <View
        key="spacer"
        style={{ backgroundColor: "white", height: 20, width: "100%" }}
      ></View>
    );
  }
  return seats;
}

额外优化建议 #

原handleClick函数未处理取消选中的逻辑，补充后可以实现点击切换座位状态：

function handleClick(seatnumber, seatamount, seatname) {
  // 切换座位选中状态
  setIsActive(prev => {
    if (prev.includes(seatnumber)) {
      return prev.filter(num => num !== seatnumber);
    } else {
      return [...prev, seatnumber];
    }
  });

  // 同步更新金额
  setAmount(prev => {
    const amt = parseFloat(prev);
    const seatAmt = parseFloat(seatamount);
    return isActive.includes(seatnumber) ? amt - seatAmt : amt + seatAmt;
  });

  // 处理区域选中逻辑（可选：如果该区域无选中座位则移除区域）
  setSelectSeat(prev => {
    if (!prev.includes(seatname)) return [...prev, seatname];
    // 判断当前区域是否还有选中座位
    const area = seats.find(s => s.name === seatname);
    const start = seats.slice(0, seats.indexOf(area)).reduce((sum, s) => sum + parseInt(s.seattotal), 1);
    const end = start + parseInt(area.seattotal) - 1;
    const hasActiveSeat = isActive.some(num => num >= start && num <= end);
    return hasActiveSeat ? prev : prev.filter(name => name !== seatname);
  });
}

内容的提问来源于stack exchange，提问作者Mohammed Maheswer