您是否在 React 应用程序中遇到了令人沮丧的 “TypeError: Cannot Read Property ‘Map' of Undefined” 错误?这种错误的调试可能很棘手,不过不用担心,我们会帮你解决。
在本文中,我们将向您介绍常见的原因和解决方案,以帮助您修复此错误。无论您是经验丰富的 React 开发人员,还是刚刚起步,本指南都将帮助您的应用程序重回正轨。
什么原因导致 “TypeError: Cannot Read Property ‘Map' of Undefined” 错误?
TypeError: Cannot Read Property ‘Map' of Undefined 错误通常发生在您尝试访问 React 代码中未定义值的属性或方法时。
通俗地说,当您尝试映射未定义的值时就会发生该错误,例如尚未初始化或尚未接收数据的数组。
在下面的示例中,您正在从 JSON 占位符数据中获取待办事项,但在来自 API 请求的数据到达之前,map 方法就已被调用。
import { useState, useEffect } from 'react'; function App() { const [todos, setTodos] = useState(); useEffect(() => { const getTodos = async () => { const response = await fetch( 'https://jsonplaceholder.typicode.com/todos?_limit=5' ); const data = await response.json(); setTodos(data); }; getTodos(); }, []); console.log(todos); return ( <div> {todos.map((todo) => ( <div key={todo.id}> <h2>Item: {todo.title}</h2> </div> ))} </div> ); } export default App;
上面的代码会产生 “TypeError: Cannot read properties of undefined (reading ‘map')” 错误:
TypeError: Cannot read properties of undefined (reading ‘map') 错误信息
您需要寻找一种方法,让 React 在数组填充之前就知道 todos 状态是一个数组,或者在 todos 状态变量从 API 请求中获取数据之前避免运行 map 方法。
修复 “TypeError:无法读取未定义的属性'Map'” 错误
以下是修复 React 中“TypeError: Cannot Read Property ‘Map' of Undefined”错误:
- 将状态变量初始化为空数组
- 使用比较运算符
- 使用可选的链式运算符 (?.)
让我们逐一探讨这些解决方案,以及它们如何帮助您解决 React 代码中的错误。
1. 将状态变量初始化为空数组
解决 “TypeError: Cannot Read Property ‘Map' of Undefined”(无法读取未定义的属性 “Map”)错误的直接解决方案之一是确保你试图映射的数组变量是已定义的。
你可以将状态变量初始化为默认的空数组,这将确保变量始终存在,并且在你尝试映射它时不会出错。
例如,下面是两个类似的组件,第一个组件的状态变量没有初始化为空数组,而第二个组件的状态变量初始化为空数组:
// Before initializing your state variable to an empty array function MyComponent() { const [myList, setMyList] = useState(); return (
-
{myList.map(item =>
- {item} )}
-
{myList.map(item =>
- {item} )}
在上面的示例中,默认情况下使用 useState([])
将 myList
状态变量初始化为空数组。这确保了即使 myList
最初未定义,它也始终是一个数组,而不会引发 “TypeError: Cannot Read Property ‘Map' of Undefined” 错误。
在获取示例中,也可以将 todos
状态变量初始化为空数组( []
):
import { useState, useEffect } from 'react'; function App() { // Initialize the state to an empty array of todos. const [todos, setTodos] = useState([]); useEffect(() => { const getTodos = async () => { const response = await fetch( 'https://jsonplaceholder.typicode.com/todos?_limit=5' ); const data = await response.json(); setTodos(data); }; getTodos(); }, []); console.log(todos); return ( <div> {todos.map((todo) => ( <div key={todo.id}> <h2>Item: {todo.title}</h2> </div> ))} </div> ); } export default App;
2. 使用比较运算符
另一种解决方案是在映射数组变量之前,使用比较运算符检查数组变量是否已定义。您可以使用三元或逻辑 AND (&&) 运算符来实现这一目的。
下面是使用三元运算符的示例:
function MyComponent() { const [myList, setMyList] = useState(); return (
-
{myList ? myList.map(item =>
- {item} ) : null}
在此示例中,在尝试映射 myList
之前,要检查是否定义了 myList
数组变量。如果 myList
未定义,三元运算符将返回 null,并且不会呈现任何内容。如果 myList 已定义,则调用 map 函数,并渲染列表项。
这与使用逻辑 AND 运算符类似:
function MyComponent() { const [myList, setMyList] = useState(); return (
-
{myList && myList.map(item =>
- {item} )}
通过使用三元运算符等比较运算符,您可以处理加载问题,这样,当您从应用程序接口导入数据时,屏幕上就会显示其他内容:
import { useState, useEffect } from 'react'; function App() { const [todos, setTodos] = useState(); useEffect(() => { const getTodos = async () => { const response = await fetch( 'https://jsonplaceholder.typicode.com/todos?_limit=5' ); const data = await response.json(); setTodos(data); }; getTodos(); }, []); console.log(todos); return ( <div> {todos ? ( todos.map((todo) => ( <div key={todo.id}> <h2>Item: {todo.title}</h2> </div> )) ) : ( <h1>Loading...</h1> )} </div> ); } export default App;
3. 使用可选的链式运算符 (?.)
您还可以使用 ES2020 中引入的可选链式运算符 (?.) 。该运算符允许您安全地访问属性或方法,例如数组的 map 方法,而不会在数组未定义时产生错误。
下面是一个使用链式运算符检查 myList
状态变量的功能组件示例:
function MyComponent() { const [myList, setMyList] = useState(); return ({myList?.map((item) => (); }{item}
))}
在上面的示例中,我们使用了可选的链式运算符来安全地访问 myList
数组变量。如果 myList
未定义,则不会呈现任何内容。如果 myList
已定义,则将调用 map 方法,并渲染列表项。
小结
在 React 中对未定义或空值使用 map 方法时,可能会出现 “TypeError: Cannot Read Property ‘Map' of Undefined” 错误。
为修复此错误,我们讨论了三种解决方案。不过,使用比较运算符是最通用的解决方案,因为它可以处理 API 可能发送空响应或空值的情况。
此外,在不确定接收到的数据是否为数组时,可以添加一些方法,在调用 map 方法之前检查并转换数据类型。
现在轮到你了: 您遇到过这个问题吗?你是如何解决的?您还使用了本文未涉及的其他方法吗?请在评论中告诉我们!
原文地址:https://www.wbolt.com/typeerror-cannot-read-property-map-of-undefined.html