如何异步更新React useState钩子的数组状态，解决map调用报错问题

你初始化orderItems时指定了数组类型OrderItem[]，初始值也是空数组，但在addSavedOrderItem方法中更新状态时，错误返回了普通对象：

// 错误写法
setOrderItems((prevOrderItems) => (
  // 这里用了大括号，返回的是对象而非数组
  {
    ...prevOrderItems,
    orderItem
  }
));

普通对象不存在map方法，因此遍历orderItems时会抛出类型错误。

修改addSavedOrderItem的状态更新逻辑，返回新数组而非新对象即可：

const addSavedOrderItem = (orderItem: OrderItem): void => {
  setOrderItems((prevOrderItems) => [
    // 展开原有数组
    ...prevOrderItems,
    // 追加新的订单条目
    orderItem
  ]);
};

如果需要避免重复添加同一商品，可先过滤原有数组中同ID的旧条目：

const addSavedOrderItem = (orderItem: OrderItem): void => {
  setOrderItems((prevOrderItems) => [
    ...prevOrderItems.filter(item => item.product !== orderItem.product),
    orderItem
  ]);
};

你当前手动维护请求计数判断所有请求完成的逻辑，可以用Promise.allSettled简化，代码更易维护：

const handleApplyModalClose = async (products, quantities): void => {
  setIsLoading(true);
  setIsProductPickerOpen(false);

  const requestPromises = products.map((prod) => {
    const quantity = quantities[prod];
    const product = productSelector(productsState, prod);
    const { unitsPerCase } = product;
    const prodId = parseInt(prod, 10);
    const oItem = {
      product: prodId,
      piecesPerBox: 0,
      quantityBoxes: quantity,
      quantityPieces: quantity * unitsPerCase,
      transportPricePerBox: 0.00,
      transportPricePerPiece: 0.00
    };
    return createOrderItemApi(order.id, oItem)
      .then((response) => addSavedOrderItem(response.data))
      .catch(() => toast.error('Failed to save order!'))
  });

  await Promise.allSettled(requestPromises);
  setIsLoading(false);
};

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