如何更新嵌套在对象中的对象数组？含React与原生JS实现

初始状态设置 #

先初始化包含房间数组的表单状态，给每个房间分配唯一ID用于后续定位：

import { useState } from 'react';

function HotelForm() {
  const [hotelForm, setHotelForm] = useState({
    // 可添加其他表单字段（如酒店名称、地址等）
    rooms: [
      { id: Date.now(), roomType: '', price: 0, maxGuests: 2 }
    ]
  });
  // 后续逻辑函数写在此处
}

更新已有房间的输入值 #

编写输入变化处理函数，通过房间ID定位目标项，严格遵循React不可变状态更新原则，复制原数组并修改对应项：

const handleRoomInputChange = (roomId, field, value) => {
  setHotelForm(prevState => ({
    ...prevState,
    rooms: prevState.rooms.map(room => 
      room.id === roomId 
        ? { ...room, [field]: value } 
        : room
    )
  }));
};

在输入组件中调用该函数：

{hotelForm.rooms.map(room => (
  <div key={room.id} className="room-item">
    <input
      type="text"
      value={room.roomType}
      onChange={(e) => handleRoomInputChange(room.id, 'roomType', e.target.value)}
      placeholder="房间类型"
    />
    <input
      type="number"
      value={room.price}
      onChange={(e) => handleRoomInputChange(room.id, 'price', Number(e.target.value))}
      placeholder="价格"
    />
  </div>
))}

添加新房间 #

实现添加新房间的函数，生成新的唯一ID，复制原房间数组并追加空房间对象：

const handleAddRoom = () => {
  setHotelForm(prevState => ({
    ...prevState,
    rooms: [...prevState.rooms, { id: Date.now(), roomType: '', price: 0, maxGuests: 2 }]
  }));
};

添加触发按钮：

<button onClick={handleAddRoom}>添加新房间</button>

无需React框架时，直接通过原生JS维护数组并同步更新DOM：

初始化数据与DOM结构 #

<div id="hotel-form">
  <div class="rooms-container" id="rooms-container"></div>
  <button id="add-room-btn">添加新房间</button>
</div>

// 初始化表单数据
let hotelForm = {
  rooms: [
    { id: Date.now(), roomType: '', price: 0, maxGuests: 2 }
  ]
};

// 渲染房间列表到DOM
function renderRooms() {
  const container = document.getElementById('rooms-container');
  container.innerHTML = '';
  
  hotelForm.rooms.forEach(room => {
    const roomEl = document.createElement('div');
    roomEl.className = 'room-item';
    roomEl.dataset.roomId = room.id;
    
    roomEl.innerHTML = `
      <input type="text" value="${room.roomType}" placeholder="房间类型" class="room-type-input">
      <input type="number" value="${room.price}" placeholder="价格" class="price-input">
    `;
    
    // 绑定输入事件
    roomEl.querySelector('.room-type-input').addEventListener('input', (e) => {
      updateRoom(room.id, 'roomType', e.target.value);
    });
    roomEl.querySelector('.price-input').addEventListener('input', (e) => {
      updateRoom(room.id, 'price', Number(e.target.value));
    });
    
    container.appendChild(roomEl);
  });
}

// 更新房间数据
function updateRoom(roomId, field, value) {
  hotelForm.rooms = hotelForm.rooms.map(room => 
    room.id === roomId ? { ...room, [field]: value } : room
  );
}

// 添加新房间并重新渲染
function addRoom() {
  hotelForm.rooms.push({ id: Date.now(), roomType: '', price: 0, maxGuests: 2 });
  renderRooms();
}

// 页面加载完成后初始化渲染
renderRooms();
document.getElementById('add-room-btn').addEventListener('click', addRoom);

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