如何解决getCartItems调用async函数返回Promise而非产品数据的问题？

核心问题 #

async 函数的返回值本身就是 Promise，所以你用map遍历的时候，每个回调都是async函数，生成的newArr自然是一堆Promise对象，直接setCartItems肯定存的不是你要的产品数据。

修复方案 #

把getCartItems改成async函数，用Promise.all等待所有请求完成，拿到真实的产品数组后再更新状态，同时加上错误处理避免崩溃：

const getSingleItem = async (id) => {
  const response = await fetch(`http://localhost:4000/products/${id}`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    },
  })
  // 先判断请求是否成功，避免解析失败
  if (!response.ok) {
    throw new Error(`请求产品${id}失败: ${response.status}`);
  }
  const json = await response.json();
  return json;
}

const getCartItems = async () => {
  // 先处理localStorage可能不存在的情况
  const cartStr = localStorage.getItem('cart');
  if (!cartStr) {
    setCartItems([]);
    return;
  }
  
  let currArr = JSON.parse(cartStr);
  // 用Promise.all等待所有请求完成，拿到真实数据数组
  try {
    const newArr = await Promise.all(
      currArr.map(el => getSingleItem(el.id))
    );
    console.log(newArr);
    setCartItems(newArr);
  } catch (err) {
    console.error('获取购物车商品失败:', err);
    // 可在这里添加错误提示逻辑，比如设置错误状态
  }
}

useEffect(() => {
  getCartItems();
}, [])

关键改动说明 #

1. getCartItems改为async函数：让内部可以用await等待异步操作完成，拿到真实数据后再更新状态。
2. Promise.all处理批量请求：它会等待所有传入的Promise都完成后，返回一个包含所有结果的数组，正好对应你需要的产品列表。
3. 增加请求成功判断：在getSingleItem里检查response.ok，避免请求失败（比如404、500）时解析json报错。
4. 处理localStorage空值：防止cart不存在时JSON.parse抛出错误。
5. try/catch错误捕获：单个请求失败会触发catch，避免整个流程崩溃，同时可以做错误提示。

如果需要顺序发起请求（而非并行），也可以用for循环实现：

const getCartItems = async () => {
  const cartStr = localStorage.getItem('cart');
  if (!cartStr) {
    setCartItems([]);
    return;
  }
  
  let currArr = JSON.parse(cartStr);
  const newArr = [];
  try {
    for (const el of currArr) {
      const item = await getSingleItem(el.id);
      newArr.push(item);
    }
    setCartItems(newArr);
  } catch (err) {
    console.error('获取商品失败:', err);
  }
}

内容的提问来源于stack exchange，提问作者Brahm Bind Singh