// ?? 沉默的“兇手”
const markList = data.map(item => ({
  ...item,
  content: parseMarkdown(item.rawContent)  // 這里返回的是 Promise！
}));
// 結(jié)果：markList = [Promise, Promise, Promise...]
// React: “我該渲染什么？一堆 Promise 對象？”

// ? 我們以為的（同步思維）：
const result = [處理后的對象1, 處理后的對象2, ...]
// ? 實際上的（異步現(xiàn)實）：
const result = [Promise<pending>, Promise<pending>, ...]

// React 嘗試渲染時：
<div>
  {markList.map(item => (
    <div>{item.content}</div>  // item.content 是 Promise，不是字符串！
  ))}
</div>
// 輸出：[object Promise], [object Promise]...

// ? 正確姿勢：等待所有 Promise 完成
const processedData = await Promise.all(
  data.map(async item => ({
    ...item,
    content: await parseMarkdown(item.rawContent)
  }))
);

原始數(shù)據(jù)：[A, B, C]
     ↓ map + async（創(chuàng)建 Promise 隊列）
Promise隊列：[PA, PB, PC]
     ↓ Promise.all（等待全部完成）
處理結(jié)果：[A', B', C'] ← 這才是 React 要的！

// ? 錯誤做法：一個廚師做完所有菜才上菜
// （顧客：我餓死了...）
// ? 正確做法：Promise.all - 多個廚師并行做菜
// （所有菜同時做好，一起上桌）
// ?? 優(yōu)化做法：分批處理 - 做好一部分先上
// （顧客：先吃著，后面的馬上好）