如何在Next.js的forEach中解析Promise？解决applicationName未定义问题

云上老周

2026-6-27

问题解决：forEach中Promise未完成就执行DrawChart导致applicationName为undefined

问题原因

forEach 不支持异步等待，你传入的 async 回调函数会被并行触发，但 forEach 本身不会等待这些 Promise 完成。所以 DrawChart(sentiments) 会在所有 getProductNameById 请求返回前就执行，此时 sentiment.applicationName 还没被赋值，自然是 undefined。

解决方案

方案1：用 `Promise.all` + `map` 并行处理（推荐，效率更高）

把 forEach 换成 map，将每个异步操作转为 Promise，再用 Promise.all 等待所有 Promise 完成后再调用 DrawChart。同时要在 useEffect 内部封装一个异步函数（因为 useEffect 直接返回异步函数会有警告）：

useEffect(() => {
  const processData = async () => {
    if (!effectRan.current) {
      let sentiments = calculateSentiments();
      
      // 等待所有异步请求完成
      await Promise.all(sentiments.map(async (sentiment: any) => {
        sentiment.applicationName = await getProductNameById(sentiment.applicationId);
      }));

      DrawChart(sentiments);
      // 标记已执行，避免重复触发
      effectRan.current = true;
    }
  };

  processData();
}, []);

方案2：用 `for...of` 串行处理

如果需要按顺序逐个执行异步请求（比如接口有调用频率限制），可以用 for...of 循环，它天然支持 await：

useEffect(() => {
  const processData = async () => {
    if (!effectRan.current) {
      let sentiments = calculateSentiments();
      
      for (const sentiment of sentiments) {
        sentiment.applicationName = await getProductNameById(sentiment.applicationId);
      }

      DrawChart(sentiments);
      effectRan.current = true;
    }
  };

  processData();
}, []);