React中座位数组对象未更新求助：预订后座位无法变灰

核心问题分析 #

• 渲染数据源错误：渲染座位按钮时遍历的是外部常量seats，而非组件状态中的seating数组。即便seating状态更新，UI也不会读取最新数据，导致座位颜色无变化。
• 预订逻辑的潜在偏差：onReserved中用!item.isReserved切换状态，但实际需求是点击「预订」后将选中座位设为已预订（即isReserved: true），而非切换状态（比如误选已预订座位时会取消预订，不符合业务逻辑）。

修复步骤 #

1. 修正渲染数据源 #

将渲染时的seats.map改为seating.map，确保UI读取最新状态数据，同时把key属性移到列表项外层元素，符合React列表渲染规范：

<div className="grid-container">
  {seating.map((seat) => (
    <div style={{ width: "50%" }} key={seat.id}>
      <button
        style={{
          backgroundColor:
            seat.isReserved === true
              ? "grey"
              : seat.id === isSelected
              ? "red"
              : "#2d95c9",
        }}
        className="seat_buttons"
        onClick={() => onSelected(seat)}
      >
        {seat.id}
      </button>
    </div>
  ))}
</div>

2. 调整预订逻辑（贴合业务需求） #

修改onReserved，直接将选中座位的isReserved设为true，并在预订后重置选中状态：

const onReserved = (id: any) => {
  setSeating((prevSeats) => {
    return prevSeats.map((item) => {
      return item.id === id
        ? { ...item, isReserved: true }
        : item;
    });
  });
  setIsSelected(0);
};

完整修复代码 #

const seats: any[] = [
  { id: 1, isSelected: false, isReserved: false },
  { id: 2, isSelected: false, isReserved: false },
  { id: 3, isSelected: false, isReserved: false },
  { id: 4, isSelected: false, isReserved: true },
  { id: 5, isSelected: false, isReserved: false },
  { id: 6, isSelected: false, isReserved: false },
];

const Seatbooking = () => {
  const [isSelected, setIsSelected] = useState(0);
  const [seating, setSeating] = useState(seats);

  function onSelected(select: any) {
    setIsSelected(select.id);
  }

  const onReserved = (id: any) => {
    setSeating((prevSeats) => {
      return prevSeats.map((item) => {
        return item.id === id
          ? { ...item, isReserved: true }
          : item;
      });
    });
    setIsSelected(0);
  };

  return (
    <>
      <div className="grid-container">
        {seating.map((seat) => (
          <div style={{ width: "50%" }} key={seat.id}>
            <button
              style={{
                backgroundColor:
                  seat.isReserved === true
                    ? "grey"
                    : seat.id === isSelected
                    ? "red"
                    : "#2d95c9",
              }}
              className="seat_buttons"
              onClick={() => onSelected(seat)}
            >
              {seat.id}
            </button>
          </div>
        ))}
      </div>

      <button className="seat_booking" onClick={() => onReserved(isSelected)}>
        Reserve seat
      </button>
    </>
  );
};

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