React 中 map 处理异步数据不渲染的问题及解决方法

// 🚨 沉默的“凶手”
const markList = data.map(item => ({
  ...item,
  content: parseMarkdown(item.rawContent)  // 这里返回的是 Promise！
}));
// 结果：markList = [Promise, Promise, Promise...]
// React: “我该渲染什么？一堆 Promise 对象？”

// ❌ 我们以为的（同步思维）：
const result = [处理后的对象1, 处理后的对象2, ...]
// ⚡ 实际上的（异步现实）：
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)
  }))
);

原始数据：[A, B, C]
     ↓ map + async（创建 Promise 队列）
Promise队列：[PA, PB, PC]
     ↓ Promise.all（等待全部完成）
处理结果：[A', B', C'] ← 这才是 React 要的！

// ❌ 错误做法：一个厨师做完所有菜才上菜
// （顾客：我饿死了...）
// ✅ 正确做法：Promise.all - 多个厨师并行做菜
// （所有菜同时做好，一起上桌）
// 🎯 优化做法：分批处理 - 做好一部分先上
// （顾客：先吃着，后面的马上好）