React中高效更新嵌套对象数组状态的策略：useReducer与数据结构优化

const [hotelForm, setHotelForm] = useState({
    HotelLocation: "",
    CheckInOn: "",
    CheckOutOn: "",
    rooms: [
        {
            roomNo: 1,
            noOfPersons: 2,
            ageOfPerson1: 0,
            ageOfPerson2: 0,
        },
    ],
});

const defaultState = {
  HotelLocation: "",
  CheckInOn: "",
  CheckOutOn: "",
  rooms: { // rooms 现在是一个对象，以 roomNo 为键
     1: {
        noOfPersons: 2,
        ageOfPerson1: 0,
        ageOfPerson2: 0,
     }
  }
};

const reducer = (state, action) => {
   // 解构 action，获取类型、房间ID以及其他房间数据
   const {type, roomId, ...roomData} = action;
   switch(type) {
     case 'updateRoom': // 处理更新房间信息的 action
       return {
         ...state, // 拷贝现有状态
         rooms: {
           ...state.rooms, // 拷贝现有 rooms 对象
           [roomId]: { // 更新特定 roomId 的房间
             ...state.rooms[roomId], // 拷贝目标房间的现有数据
             ...roomData // 合并新的房间数据
           }
         }
       };
     // 可以根据需求添加更多 case，例如 'addRoom', 'removeRoom' 等
     default:
       return state; // 未知 action 类型时返回原状态
   }
};

import React, { useReducer } from 'react';

// ... defaultState 定义如上 ...

function HotelBookingForm() {
  const [state, dispatch] = useReducer(reducer, defaultState);

  // 当需要更新房间数据时，调用 dispatch
  const handleAgeChange = (roomId, newAge) => {
    dispatch({ type: 'updateRoom', roomId: roomId, ageOfPerson1: newAge });
  };

  // 示例：更新房间1的第一个入住人的年龄为20
  // handleAgeChange(1, 20);

  return (
    <div>
      {/* 渲染表单和房间信息 */}
      {/* ... */}
      <button onClick={() => handleAgeChange(1, 25)}>更新房间1的年龄</button>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  );
}

import React, { useReducer } from 'react';

// 1. 定义 reducer 函数
const reducer = (state, action) => {
   const {type, roomId, ...roomData} = action;
   switch(type) {
     case 'updateRoom':
       // 确保 roomId 存在且是有效键
       if (!state.rooms[roomId]) {
         console.warn(`Attempted to update non-existent room with ID: ${roomId}`);
         return state;
       }
       return {
         ...state,
         rooms: {
           ...state.rooms,
           [roomId]: {
             ...state.rooms[roomId],
             ...roomData
           }
         }
       };
     case 'addRoom':
       const newRoomId = Math.max(...Object.keys(state.rooms).map(Number)) + 1; // 简单生成新ID
       return {
         ...state,
         rooms: {
           ...state.rooms,
           [newRoomId]: {
             roomNo: newRoomId,
             noOfPersons: 1,
             ageOfPerson1: 0,
             ...roomData // 允许传入初始数据
           }
         }
       };
     case 'removeRoom':
       const newRooms = { ...state.rooms };
       delete newRooms[roomId];
       return {
         ...state,
         rooms: newRooms
       };
     default:
       return state;
   }
};

// 2. 定义初始状态，rooms 结构为对象
const defaultState = {
  HotelLocation: "北京",
  CheckInOn: "2023-10-26",
  CheckOutOn: "2023-10-28",
  rooms: {
     1: {
        noOfPersons: 2,
        ageOfPerson1: 0,
        ageOfPerson2: 0,
     }
  }
};

// 3. 在组件中使用 useReducer
function HotelFormManager() {
  const [state, dispatch] = useReducer(reducer, defaultState);

  // 示例：更新房间1的第一个入住人年龄
  const handleUpdateAge = () => {
    dispatch({type: 'updateRoom', roomId: 1, ageOfPerson1: 20});
  };

  // 示例：添加一个新房间
  const handleAddRoom = () => {
    dispatch({type: 'addRoom', noOfPersons: 2});
  };

  // 示例：移除房间1
  const handleRemoveRoom = () => {
    dispatch({type: 'removeRoom', roomId: 1});
  };

  return (
    <div>
      <h2>酒店预订表单管理</h2>
      <div>
        <label>酒店位置: </label>
        <input 
          type="text" 
          value={state.HotelLocation} 
          onChange={(e) => dispatch({type: 'updateHotelLocation', location: e.target.value})} // 假设 reducer 中有这个 case
        />
      </div>
      <h3>房间信息:</h3>
      {Object.values(state.rooms).map(room => (
        <div key={room.roomNo} style={{border: '1px solid #ccc', margin: '10px', padding: '10px'}}>
          <p>房间号: {room.roomNo}</p>
          <p>人数: {room.noOfPersons}</p>
          <p>第一个入住人年龄: {room.ageOfPerson1}</p>
          <p>第二个入住人年龄: {room.ageOfPerson2}</p>
          <button onClick={() => dispatch({type: 'updateRoom', roomId: room.roomNo, ageOfPerson1: room.ageOfPerson1 + 1})}>
            增加年龄
          </button>
          <button onClick={() => dispatch({type: 'removeRoom', roomId: room.roomNo})}>
            删除此房间
          </button>
        </div>
      ))}
      <button onClick={handleAddRoom}>添加新房间</button>
      <button onClick={handleUpdateAge}>更新房间1年龄为20</button>
      {/* <button onClick={handleRemoveRoom}>删除房间1</button> */}

      <h3>当前状态:</h3>
      <pre>{JSON.stringify(state, null, 2)}</pre>
    </div>
  );
}

export default HotelFormManager;