React 中 map 處理異步數(shù)據(jù)不渲染的問題及解決方法
更新時間：2026年01月20日 09:11:56 作者：孩子 你要相信光
文章講述了在使用React時遇到的異步問題導致頁面卡頓的情況,通過Promise.all等方法解決了異步操作的順序問題,使得頁面能夠正常渲染,感興趣的朋友跟隨小編一起看看吧
Map 異步之困：從卡頓到流暢的蛻變
當
map遇上異步，你的頁面還在“思考人生”嗎？
故事：一個讓頁面“沉默”的 bug
昨天，我的頁面像個啞巴一樣——數(shù)據(jù)準備好了，UI 卻一片空白。控制臺沒有報錯，網(wǎng)絡請求一切正常，但用戶看到的就是 “無”。
調(diào)試三小時后，終于找到了罪魁禍首：
// ?? 沉默的“兇手”
const markList = data.map(item => ({
...item,
content: parseMarkdown(item.rawContent) // 這里返回的是 Promise！
}));
// 結(jié)果：markList = [Promise, Promise, Promise...]
// React: “我該渲染什么？一堆 Promise 對象？”問題診斷：為什么頁面不渲染？
同步思維 vs 異步現(xiàn)實
// ? 我們以為的（同步思維）： const result = [處理后的對象1, 處理后的對象2, ...] // ? 實際上的（異步現(xiàn)實）： const result = [Promise<pending>, Promise<pending>, ...]
React 的困惑
// React 嘗試渲染時：
<div>
{markList.map(item => (
<div>{item.content}</div> // item.content 是 Promise，不是字符串！
))}
</div>
// 輸出：[object Promise], [object Promise]...解決方案：讓異步“排隊站好”
方案一：Promise.all 大法（最常用）
// ? 正確姿勢：等待所有 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)化做法：分批處理 - 做好一部分先上 // （顧客：先吃著，后面的馬上好）
備忘清單
需要 Promise.all 的場景：
- ?
marked.parse()處理 Markdown - ? 圖片預加載
new Image().src - ? API 并行請求多個資源
- ? 文件讀取/處理
- ? 加密/解密操作
不需要 Promise.all 的場景：
- ? 純同步計算（
array.map(x => x * 2)） - ? 簡單的數(shù)據(jù)轉(zhuǎn)換
- ? 過濾/排序操作
下次當你的頁面陷入沉默時，記得問一句：
“是不是有 Promise 在 map 里沒被 await？”
記?。寒惒讲豢膳?，可怕的是不知道它是異步的！
到此這篇關(guān)于React 中 map 處理異步數(shù)據(jù)不渲染的問題及解決方法的文章就介紹到這了,更多相關(guān)react map 處理異步數(shù)據(jù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于React如何將組件渲染到指定DOM節(jié)點的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習下吧。2017-09-09
使用react-router4.0實現(xiàn)重定向和404功能的方法
本篇文章主要介紹了使用react-router4.0實現(xiàn)重定向和404功能的方法，具有一定的參考價值，有興趣的可以了解一下2017-08-08
react中value與defaultValue的區(qū)別及說明
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題
這篇文章主要介紹了react hooks使用Echarts圖表中遇到的情況及相關(guān)配置問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
淺談react-native熱更新react-native-pushy集成遇到的問題
下面小編就為大家?guī)硪黄獪\談react-native熱更新react-native-pushy集成遇到的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
本文主要介紹了React選擇MessageChannel作為事件調(diào)度機制的原因,essageChannel屬于宏任務,延遲極低且不會阻塞渲染,能夠滿足React在不阻塞瀏覽器的前提下,盡可能多地推進Fiber渲染進度的需求2026-05-05
這篇文章主要為大家詳細介紹了React?開發(fā)中遇到的具名插槽的函數(shù)用法,文中的示例代碼講解詳細,具有一定的學習價值,有興趣的小伙伴可以了解一下2023-11-11
react實現(xiàn)鼠標懸停在SVG地圖上某個區(qū)域時上方呈現(xiàn)柱形圖效果
這篇文章主要介紹了react實現(xiàn)鼠標懸停在SVG地圖上某個區(qū)域時,其上方呈現(xiàn)柱形圖,本文通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下2025-04-04
這篇文章主要介紹了react+tsx中使用better-scroll,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-07-07