JavaScript .map函数内重新渲染问题：座位图状态不更新

你当前的代码存在两个核心问题：

1. 单个状态变量复用：所有座位共用同一个availability状态，异步请求完成后更新这个状态会让所有座位同步切换状态，而且组件首次渲染时异步请求还未返回，所有座位都会使用初始的true值。
2. 渲染逻辑与异步请求时序不匹配：在map循环里发起异步请求，组件已经先返回了座位DOM，后续请求完成更新状态时，无法精准对应到单个座位，导致状态混乱。

方案1：用状态对象存储每个座位的占用状态 #

1. 初始化一个状态对象，用来记录每个座位的占用情况。
2. 用useEffect批量查询所有座位的占用信息，一次性更新状态，避免循环内重复请求。
3. 渲染时根据状态对象里的对应值判断座位状态。

修改后的代码示例：

import { useEffect, useState } from 'react';
import { collection, query, where, getDocs } from 'firebase/firestore';

const SeatRow = ({ rowCount }) => {
  const [seatStatus, setSeatStatus] = useState({}); // 键是座位号，值为是否可用

  useEffect(() => {
    const fetchSeatStatuses = async () => {
      const colRef = collection(db, 'events', 'kvammalan2023', 'reservations');
      // 生成当前排的所有座位号
      const seatNumbers = Array.from({ length: 20 }, (_, i) => {
        const seat = i + 1;
        return seat < 10 ? `${rowCount}0${seat}` : `${rowCount}${seat}`;
      }).map(Number);

      // 批量查询座位状态
      const statusUpdates = {};
      for (const num of seatNumbers) {
        const q = query(colRef, where('seat', '==', num));
        const querySnapshot = await getDocs(q);
        statusUpdates[num] = querySnapshot.empty; // empty为true表示座位可用
      }
      setSeatStatus(statusUpdates);
    };

    fetchSeatStatuses();
  }, [rowCount]);

  return (
    <>
      {[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map((seat) => {
        const seatNumber = seat < 10 ? Number(`${rowCount}0${seat}`) : Number(`${rowCount}${seat}`);
        const isAvailable = seatStatus[seatNumber] ?? true; // 默认可用，直到请求返回结果

        return (
          <div
            key={seatNumber}
            onClick={isAvailable ? checkout : null}
            className={isAvailable ? 'p-3 seat-avail' : 'p-3 seat-taken'}
            style={isAvailable ? { width: '4rem', cursor: 'pointer' } : { width: '4rem', backgroundColor: 'red' }}
          >
            <span className='text-light'>{seat < 10 ? `${rowCount}0${seat}` : `${rowCount}${seat}`}</span>
          </div>
        );
      })}
    </>
  );
};

方案2：将单个座位封装为独立组件 #

每个座位组件内部管理自己的占用状态，避免状态复用导致的混乱：

import { useEffect, useState } from 'react';
import { collection, query, where, getDocs } from 'firebase/firestore';

const Seat = ({ seatNumber, checkout }) => {
  const [isAvailable, setIsAvailable] = useState(true);

  useEffect(() => {
    const colRef = collection(db, 'events', 'kvammalan2023', 'reservations');
    const q = query(colRef, where('seat', '==', seatNumber));
    getDocs(q).then((querySnapshot) => {
      setIsAvailable(querySnapshot.empty);
    });
  }, [seatNumber]);

  const displayNumber = seatNumber.toString();

  return (
    <div
      onClick={isAvailable ? checkout : null}
      className={isAvailable ? 'p-3 seat-avail' : 'p-3 seat-taken'}
      style={isAvailable ? { width: '4rem', cursor: 'pointer' } : { width: '4rem', backgroundColor: 'red' }}
    >
      <span className='text-light'>{displayNumber}</span>
    </div>
  );
};

// 父组件中使用
const SeatRow = ({ rowCount }) => {
  return (
    <>
      {[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20].map((seat) => {
        const seatNumber = seat < 10 ? Number(`${rowCount}0${seat}`) : Number(`${rowCount}${seat}`);
        return <Seat key={seatNumber} seatNumber={seatNumber} checkout={checkout} />;
      })}
    </>
  );
};

• 避免在map循环内发起异步请求，改用批量查询或组件内useEffect，减少请求次数并避免竞态问题。
• 为每个座位单独维护状态，确保状态变更只影响对应座位。
• 给循环渲染的DOM元素添加key属性，帮助React正确识别组件更新。

内容的提问来源于stack exchange，提问作者Daniel Olsen