React数组迭代内用Await导致useState更新异常问题

你的问题出在循环内多次调用setProducts且直接修改原数组，核心原因如下：

1. React的setState是异步批量更新机制，循环内多次调用会被合并，最终可能只生效最后一次更新。
2. 直接修改原products数组（引用类型），React无法检测到状态变化——因为数组的引用地址没有改变。

方案1：串行处理+不可变更新 #

遍历产品时创建新的数组/对象副本，避免直接修改原数据，所有数据处理完成后一次性更新状态：

useEffect(() => {
  async function loadNotes() {
    console.log("loading notes");
    try {
      setShowNotesLoadingError(false);
      setNotesLoading(true);
      // 获取产品列表后创建副本，避免修改原数据
      let products = await ProductsApi.fetchProducts();
      for (let index = 0; index < products.length; index++) {
        const prices = await ProductsApi.getLowestPrice(products[index].asin);
        // 创建新对象替换原数组中的元素，保持状态不可变
        products = [
          ...products.slice(0, index),
          {
            ...products[index],
            lowestPriceFraction: prices.lastPriceFraction,
            lowestPriceWhole: prices.lastPriceWhole
          },
          ...products.slice(index + 1)
        ];
      }
      // 所有价格数据获取完成后，一次性更新状态
      setProducts(products);
    } catch (error) {
      console.error("Fehler: " + error);
      setShowNotesLoadingError(true);
    } finally {
      setNotesLoading(false);
    }
  }
  loadNotes();
}, []);

方案2：并行处理+Promise.all（推荐） #

用Promise.all并行获取所有产品的价格，效率更高，同时严格遵循状态不可变原则：

useEffect(() => {
  async function loadNotes() {
    console.log("loading notes");
    try {
      setShowNotesLoadingError(false);
      setNotesLoading(true);
      const products = await ProductsApi.fetchProducts();
      // 并行请求所有产品的价格，返回带价格的新数组
      const productsWithPrices = await Promise.all(
        products.map(async (product) => {
          const prices = await ProductsApi.getLowestPrice(product.asin);
          return {
            ...product,
            lowestPriceFraction: prices.lastPriceFraction,
            lowestPriceWhole: prices.lastPriceWhole
          };
        })
      );
      setProducts(productsWithPrices);
    } catch (error) {
      console.error("Fehler: " + error);
      setShowNotesLoadingError(true);
    } finally {
      setNotesLoading(false);
    }
  }
  loadNotes();
}, []);

关键说明 #

• 状态不可变：永远不要直接修改React状态中的数组/对象，必须创建新的副本，这样React才能检测到状态变化并触发UI更新。
• 减少不必要的setState调用：循环内频繁调用setState会导致多次重渲染，且异步更新特性会导致中间状态被覆盖，最终UI无法正确反映所有数据。
• 并行请求提升性能：Promise.all可以同时发起所有价格请求，相比串行await能大幅减少整体等待时间。

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