如何修复React报错 – TypeError: Cannot Read Property ‘Map’ of Undefined

您是否在 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”错误：

1. 将状态变量初始化为空数组
2. 使用比较运算符
3. 使用可选的链式运算符 (?.)

让我们逐一探讨这些解决方案，以及它们如何帮助您解决 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 (
<ul>
{myList.map(item => <li>{item}</li>)}
</ul>
);
}
// After initializing your state variable to an empty array
function MyComponent() {
const [myList, setMyList] = useState([]);
return (
<ul>
{myList.map(item => <li>{item}</li>)}
</ul>
);
}

在上面的示例中，默认情况下使用 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 (
<ul>
{myList ? myList.map(item => <li>{item}</li>) : null}
</ul>
);
}

在此示例中，在尝试映射 myList 之前，要检查是否定义了 myList 数组变量。如果 myList 未定义，三元运算符将返回 null，并且不会呈现任何内容。如果 myList 已定义，则调用 map 函数，并渲染列表项。

这与使用逻辑 AND 运算符类似：

function MyComponent() {
const [myList, setMyList] = useState();
return (
<ul>
{myList && myList.map(item => <li>{item}</li>)}
</ul>
);
}

通过使用三元运算符等比较运算符，您可以处理加载问题，这样，当您从应用程序接口导入数据时，屏幕上就会显示其他内容：

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 (
<div>
{myList?.map((item) => (
<p>{item}</p>
))}
</div>
);
}

在上面的示例中，我们使用了可选的链式运算符来安全地访问 myList 数组变量。如果 myList 未定义，则不会呈现任何内容。如果 myList 已定义，则将调用 map 方法，并渲染列表项。

小结

在 React 中对未定义或空值使用 map 方法时，可能会出现 “TypeError: Cannot Read Property ‘Map’ of Undefined” 错误。

为修复此错误，我们讨论了三种解决方案。不过，使用比较运算符是最通用的解决方案，因为它可以处理 API 可能发送空响应或空值的情况。

此外，在不确定接收到的数据是否为数组时，可以添加一些方法，在调用 map 方法之前检查并转换数据类型。

现在轮到你了： 您遇到过这个问题吗？你是如何解决的？您还使用了本文未涉及的其他方法吗？请在评论中告诉我们！