React Native克隆状态数组始终为空，无法添加新元素求助

问题 #

开发购物车功能时遇到异常：通过克隆React状态数组的方式无法正确添加/更新订单元素，直接修改原状态反而能正常工作。

状态定义：

const [data, setData] = useState({
  current_order:[],
  total:0,
});

data.current_order存储购物车商品列表，添加商品时逻辑为：若商品已存在则更新数量，否则添加新条目。addToCart函数实现如下：

const addToCart = (index) => {
  let tempCurrentOrder = [...data.current_order];
  let findItem = _.findIndex(data.current_order, {
    itemId: datab.displayedItems[index].id,
  });

  console.log("FindItem", tempCurrentOrder, data.current_order, findItem);
  if (findItem === -1) {
    tempCurrentOrder.push({
      itemId: datab.displayedItems[index].id,
      itemName: datab.displayedItems[index].name,
      choiceId: "",
      choiceName: "",
      choicePrice: "",
      optionIds: [],
      optionInfos: [],
      optionGroups: [],
      qty: 1,
      itemPrice: parseFloat(priceObject.price),
      subTotal: parseFloat(priceObject.price),
      priceTypeId: datab.current_price_type_id,
      note: "",
    });
  } else {
    let newQty = tempCurrentOrder[findItem].qty + 1;
    tempCurrentOrder[findItem] = {
      ...tempCurrentOrder[findItem],
      qty: newQty,
      subTotal:
        parseFloat(newQty) * parseFloat(tempCurrentOrder[findItem].itemPrice),
    };
  }
  //...
  setData((prevData) => {
    return {
      ...prevData,
      ["current_order"]: tempCurrentOrder,
      ["total"]: total,
    };
  });
};

异常表现：data.current_order始终为空，添加第二个及以后商品时无法正常更新，购物车始终只有1个商品。但将let tempCurrentOrder = [...data.current_order]改为let tempCurrentOrder = data.current_order（直接引用原数组），功能即可正常工作。

原因与解决方法 #

核心原因 #

React状态更新是异步的，函数执行时data.current_order可能还是旧值（前一次setData还未完成状态更新）。你克隆的是旧状态数组，同时查找商品时也依赖旧的data.current_order，导致第二次添加同一商品时，findItem仍返回-1，重复添加新条目而非更新数量。

直接引用原数组时，虽违反React不可变更新原则，但因直接修改了原状态数组，后续查找能拿到最新内容，所以看似功能正常，但这种写法会导致状态变更不被React检测到，引发渲染异常。

正确解决方案 #

1. 基于最新状态操作：在setData的回调中通过prevData获取最新状态，确保所有操作都基于最新的购物车数据：

const addToCart = (index) => {
  const targetItem = datab.displayedItems[index];
  setData((prevData) => {
    // 用最新的prevData.current_order查找商品
    const findItem = _.findIndex(prevData.current_order, {
      itemId: targetItem.id,
    });
    // 克隆最新的数组
    let tempCurrentOrder = [...prevData.current_order];
    
    if (findItem === -1) {
      tempCurrentOrder.push({
        itemId: targetItem.id,
        itemName: targetItem.name,
        choiceId: "",
        choiceName: "",
        choicePrice: "",
        optionIds: [],
        optionInfos: [],
        optionGroups: [],
        qty: 1,
        itemPrice: parseFloat(priceObject.price),
        subTotal: parseFloat(priceObject.price),
        priceTypeId: datab.current_price_type_id,
        note: "",
      });
    } else {
      const newQty = tempCurrentOrder[findItem].qty + 1;
      tempCurrentOrder[findItem] = {
        ...tempCurrentOrder[findItem],
        qty: newQty,
        subTotal: newQty * parseFloat(tempCurrentOrder[findItem].itemPrice),
      };
    }
    // 实时计算最新总价，避免依赖外部过时的total变量
    const newTotal = tempCurrentOrder.reduce((sum, item) => sum + item.subTotal, 0);
    
    return {
      ...prevData,
      current_order: tempCurrentOrder,
      total: newTotal,
    };
  });
};

2. 避免依赖外部过时状态：不要在函数内部直接使用data.current_order或total这类可能过期的状态变量，全部通过prevData获取最新值。
3. 坚持不可变更新原则：禁止直接修改原状态数组，必须通过克隆后修改的方式更新，确保React能检测到状态变更并触发正确渲染。

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