React复杂setState问题：多订单状态无法保留求解决方案

核心思路 #

把原来的单个订单状态对象，改成以orderId为键的嵌套对象，每个键对应对应订单的trackingId和carrierName，这样每个订单的输入状态会独立存储，不会互相覆盖。

具体实现步骤 #

1. 初始化状态结构
   用useState创建一个空对象（或预填充所有订单的初始值），用来存储所有订单的输入状态：

   // 空初始值
   const [orders, setOrders] = useState({});
   
   // 可选：如果需要预先初始化所有订单的空输入框状态
   const initialOrders = orderList.reduce((acc, order) => {
     acc[order.orderId] = { trackingId: '', carrierName: '' };
     return acc;
   }, {});
   const [orders, setOrders] = useState(initialOrders);
   

2. 编写状态更新函数
   更新状态时，通过展开运算符保留已有订单的状态，只修改当前操作的订单字段：

   const handleInputChange = (orderId, field, value) => {
     setOrders(prevOrders => ({
       ...prevOrders, // 保留所有已存在的订单数据
       [orderId]: {
         ...prevOrders[orderId], // 保留当前订单已填写的其他字段
         [field]: value // 更新目标字段
       }
     }));
   };
   

3. 绑定输入框事件
   在每个订单的输入框中，传入对应的orderId和字段名，关联更新函数：

   {orderList.map(order => (
     <div key={order.orderId} className="order-item">
       <input
         type="text"
         placeholder="Tracking ID"
         value={orders[order.orderId]?.trackingId || ''}
         onChange={(e) => handleInputChange(order.orderId, 'trackingId', e.target.value)}
       />
       <input
         type="text"
         placeholder="Carrier Name"
         value={orders[order.orderId]?.carrierName || ''}
         onChange={(e) => handleInputChange(order.orderId, 'carrierName', e.target.value)}
       />
     </div>
   ))}
   

效果说明 #

这样修改后，无论编辑哪个订单的输入框，只会更新对应orderId下的字段，其他订单的状态都会被完整保留。比如同时编辑orderId为1和2的订单后，orders对象会是类似这样的结构：

{
  1: { trackingId: '123', carrierName: 'UPS' },
  2: { trackingId: '456', carrierName: 'FedEx' }
}

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