React報錯map() is not a function詳析
總覽
當我們對一個不是數組的值調用map()
方法時,就會產生"TypeError: map is not a function"
錯誤。為瞭解決該錯誤,請將你調用map()
方法的值記錄在console.log
上,並確保隻對有效的數組調用map
。
這裡有個示例來展示錯誤是如何發生的。
const App = () => { const obj = {}; // ⛔️ Uncaught TypeError: map is not a function return ( <div> {obj.map(element => { return <h2>{element}</h2>; })} </div> ); }; export default App;
我們在一個對象上調用Array.map()
方法,得到瞭錯誤反饋。
為瞭解決該錯誤,請console.log
你調用map
方法的值,確保它是一個有效的數組。
export default function App() { const arr = ['one', 'two', 'three']; return ( <div> {arr.map((element, index) => { return ( <div key={index}> <h2>{element}</h2> </div> ); })} </div> ); }
Array.isArray
你可以通過使用Array.isArray
方法,來有條件地檢查值是否為數組。
const App = () => { const obj = {}; return ( <div> {Array.isArray(obj) ? obj.map(element => { return <h2>{element}</h2>; }) : null} </div> ); }; export default App;
如果值為數組,則返回對其調用map
方法的結果,否則返回null
。這種方式不會得到錯誤,即使值不是一個數組。
如果值是從遠程服務中獲取,請確保它是你期望的類型,將其記錄到控制臺,並確保你在調用
map
方法之前將其解析為一個原生JavaScript數組。
Array.from
如果有一個類數組對象,在調用map
方法之前你嘗試轉換為數組,可以使用Array.from()
方法。
const App = () => { const set = new Set(['one', 'two', 'three']); return ( <div> {Array.from(set).map(element => { return ( <div key={element}> <h2>{element}</h2> </div> ); })} </div> ); }; export default App;
在調用map
方法之前,我們將值轉換為數組。這也適用於類數組的對象,比如調用getElementsByClassName
方法返回的NodeList
。
Object.keys
如果你嘗試迭代遍歷對象,使用Object.keys()
方法獲取對象的鍵組成的數組,在該數組上可以調用map()
方法。
export default function App() { const employee = { id: 1, name: 'Alice', salary: 100, }; return ( <div> {/* 👇️ iterate object KEYS */} {Object.keys(employee).map((key) => { return ( <div key={key}> <h2> {key}: {employee[key]} </h2> <hr /> </div> ); })} <br /> <br /> <br /> {/* 👇️ iterate object VALUES */} {Object.values(employee).map((value, index) => { return ( <div key={index}> <h2>{value}</h2> <hr /> </div> ); })} </div> ); }
我們使用Object.keys
方法得到對象的鍵組成的數組。
const employee = { id: 1, name: 'Alice', salary: 100, }; // 👇️ ['id', 'name', 'salary'] console.log(Object.keys(employee)); // 👇️ [1, 'Alice', 100] console.log(Object.values(employee));
我們隻能在數組上調用map()
方法,所以我們需要獲得一個對象的鍵或者對象的值的數組。
到此這篇關於React報錯map() is not a function詳析的文章就介紹到這瞭,更多相關React map is not a function內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Object.keys()、Object.values()、Object.entries()用法總結
- JavaScript中你不知道的Object.entries用法
- JavaScript Reduce使用詳解
- React報錯解決之ref返回undefined或null
- JavaScript循環遍歷的24個方法,你都知道嗎