如何异步更新 React useState 钩子数组

Question

我有订单 window，它会打开模式对话框供用户 select 添加多个产品。比赛时，所有产品均由回调函数handleApplyModalClose传回。在此函数中，为每个产品创建新项目并将其发送到 API。在每个响应中，我都尝试通过调用 addSavedOrderItem 来使用响应数据更新数组 orderItems。

  const [orderItems, setOrderItems] = useState<OrderItem[]>([]);
  
  const addSavedOrderItem = (orderItem): void => {
    setOrderItems((prevOrderItems) => (
      {
        ...prevOrderItems,
        orderItem
      }
    ));
  };
  
  const handleApplyModalClose = (products, quantities): void => {
    setIsLoading(true);
    let count = 0;
    const expects = products.length;
    products.forEach((prod) => {
      const quantity = quantities[prod];
      const product = productSelector(productsState, prod);
      const { unitsPerCase } = product;
      const prodId: number = parseInt(prod, 10);
      const oItem = {
        product: prodId * 1,
        piecesPerBox: 0,
        quantityBoxes: quantity * 1,
        quantityPieces: quantity * unitsPerCase,
        transportPricePerBox: 0.00,
        transportPricePerPiece: 0.00
      };
      createOrderItemApi(order.id, oItem)
        .then((response) => {
          addSavedOrderItem(response.data);
          count += 1;
          if (count === expects) setIsLoading(false);

        }).catch((error) => {
          toast.error('Failed to save order!');
          count += 1;
          if (count === expects) setIsLoading(false);
        });
    });

    setIsProductPickerOpen(false);
  };

我遇到的问题是，当我尝试以这种方式更新 orterItems 数组时，当我打印出订单商品时组件抛出错误：

TypeError: orderItems.map is not a function

Answer 1

这里

 const addSavedOrderItem = (orderItem): void => {
    setOrderItems((prevOrderItems) => (
      {
        ...prevOrderItems,
        orderItem
      }
    ));
  };

您正在将状态类型从数组更改为对象，因此出现错误。我想知道为什么打字稿不会尖叫错误的数据类型

如何异步更新 React useState 钩子数组

How to asynchronously update React useState hook array

reactjs

use-state