无法在 React 中读取未定义的属性（读取“地图”）

作者

无法在 React 中读取未定义的属性（读取 ‘map’）

Cannot read property ‘map’ of undefined in React [Solved]

“TypeError: Cannot read properties of undefined (reading ‘map’)”发生在我们对map()一个undefined值调用方法时，最常见的情况
map是在来自 API 请求的数据到达之前调用该方法。

要解决该错误，请将要映射的值初始化为空数组。

无法读取未定义的属性映射

壳
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
Uncaught TypeError: Cannot read properties of null (reading 'map')

无法读取 null 的属性映射

如果您收到错误“TypeError：无法读取 null 的属性‘map’”，解决方案是相同的。

下面是错误如何发生的示例。

应用程序.js
import {useState, useEffect} from 'react';

function App() {
  // ⛔️ State is not initialized to an empty array
  const [users, setUsers] = useState();

  useEffect(() => {
    async function getUsers() {
      const response = await fetch('https://randomuser.me/api/', {
        method: 'GET',
        headers: {
          accept: 'application/json',
        },
      });

      const data = await response.json();

      setUsers(data.results);
    }

    getUsers();
  }, []);

  console.log(users);

  return (
    <div>
      {/* ⛔️ users is `undefined` because API has not responded yet */}
      {/* ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'map') */}
      {users.map(user => (
        <div key={user.id.value}>
          <h2>
            Name: {user.name.first} {user.name.last}
          </h2>
        </div>
      ))}
    </div>
  );
}

export default App;

我们声明了users变量但没有将其初始化为空数组。

App调用
该函数时，它会尝试对某个值调用Array.map()
方法undefined，但会发生错误。

null当您将状态变量初始化为而不是空数组时，会发生“TypeError: cannot read properties ‘map’ of null” 。

将你的状态变量初始化为一个空数组

要解决这两个错误，请将变量的值初始化users为空数组。

应用程序.js
import {useState, useEffect} from 'react';

function App() {
  // ✅ State is initialized to an empty array
  const [users, setUsers] = useState([]);

  useEffect(() => {
    async function getUsers() {
      const response = await fetch('https://randomuser.me/api/', {
        method: 'GET',
        headers: {
          accept: 'application/json',
        },
      });

      const data = await response.json();

      setUsers(data.results);
    }

    getUsers();
  }, []);

  console.log(users);

  return (
    <div>
      {/* ✅ users is initially [] and then gets populated after API responds */}
      {users.map(user => (
        <div key={user.id.value}>
          <h2>
            Name: {user.name.first} {user.name.last}
          </h2>
        </div>
      ))}
    </div>
  );
}

export default App;

我们在调用
useState方法时提供了一个空数组作为初始值。

这样，users变量最初设置为一个空数组，并且在一个空数组而不是一个或一个值map上调用该方法。 undefinednull

在我们的useEffect挂钩运行并且远程 API 响应数据后，我们更新状态并重新渲染我们的组件。

在组件生命周期的任何时间点，我们的users变量都不等于undefinedornull并且错误不会发生。

如果您收到错误
TypeError: map() is not a function in React，请单击链接并按照说明进行操作。

使用可选的链接运算符 (?.)

undefined另一种方法是使用可选的链接 (?.) 运算符在引用等于or时进行短路null。

应用程序.js
<div>
  {/* ✅ using optional chaining (?.) */}
  {users?.map(user => (
    <div key={user.id.value}>
      <h2>
        Name: {user.name.first} {user.name.last}
      </h2>
    </div>
  ))}
</div>

如果左侧的值为空值（或），则可选链接(?.)运算符短路并返回。undefinednullundefined

如果users状态变量存储一个undefined或一个null值，则
Array.map()根本不调用该方法。

下面是可选链接运算符如何在 JavaScript 中工作的示例。

索引.js
const users = undefined;

// 👇️ logs undefined
console.log(
  users?.map(user => {
    console.log(user);
  }),
);

此解决方案适用于两种错误：

  • 类型错误：无法读取未定义的属性“映射”
  • 类型错误：无法读取 null 的属性“映射”

使用三元运算符检查值是否为数组

以下解决方案也适用于这两种错误。

在调用方法之前，您有条件地检查变量是否为数组map()
，这将防止您收到错误。

应用程序.js
<div>
  {/* ✅ check if array before calling `map()` */}
  {Array.isArray(users)
    ? users.map(user => (
        <div key={user.id.value}>
          <h2>
            Name: {user.name.first} {user.name.last}
          </h2>
        </div>
      ))
    : null}
</div>

我们使用了一个三元运算符，它与语句非常相似if/else。

如果问号左边的表达式为真，则运算符返回冒号左边的值，否则返回冒号右边的值。

你可以想象冒号前的值是if块，冒号后的值是else块。

我们检查变量是否users存储一个数组，如果是，我们返回调用该map()方法的结果，否则，我们返回null。

使用逻辑与 (&&) 运算符

您还可以使用逻辑与 (&&) 运算符解决错误。

应用程序.js
<div>
  {/* ✅ using logical AND (&&) */}
  {users &&
    users.map(user => (
      <div key={user.id.value}>
        <h2>
          Name: {user.name.first} {user.name.last}
        </h2>
      </div>
    ))}
</div>

逻辑
AND (&&)
运算符如果为假，则返回其左侧的值，否则返回其右侧的值。

如果users变量存储一个undefined或一个值，我们根本null不会尝试调用该方法。Array.map()

使用if语句

您也可以使用简单的if语句来解决错误。

应用程序.js
function App() {
  const [users, setUsers] = useState();

  useEffect(() => {
    async function getUsers() {
      const response = await fetch('https://randomuser.me/api/', {
        method: 'GET',
        headers: {
          accept: 'application/json',
        },
      });

      const data = await response.json();

      setUsers(data.results);
    }

    getUsers();
  }, []);

  // ✅ Add this if statement to check if not undefined or null
  if (users == null) {
    return;
  }

  return (
    <div>
      {users.map(user => (
        <div key={user.id.value}>
          <h2>
            Name: {user.name.first} {user.name.last}
          </h2>
        </div>
      ))}
    </div>
  );
}

如果状态变量存储一个
或一个值，则该if语句返回。nullusersundefinednull

应用程序.js
if (users == null) {
  return;
}

这样，如果状态变量的值为or ，users.map()则永远不会到达 return 语句中的调用
。usersnullundefined

该if语句同时检查nullandundefined因为我们使用了松散相等 (==) 运算符。

索引.js
// 👇️ true
console.log(null == undefined);

// 👇️ false
console.log(null === undefined);

当您使用松散相等 (==) 运算符时，null等于undefined。

使用严格相等 (===) 运算符时情况并非如此。

我还写了一篇关于
如何在 React 中检查变量是否为 null 或 undefined 的详细指南。

你的 API 可能发送了一个空响应或一个null值

如果您的 API 响应为空，则可能是您将状态设置为一个
undefined值，这可能是导致错误的原因。

检查您的 API 是否以null值响应，您可能正在将状态变量更新为null来自 API 的响应，这会导致错误。

尝试调用Array.map()类数组对象

错误的另一个常见原因是尝试Map在类似数组的对象（例如Set.

应用程序.js
function App() {
  const users = new Set(['James', 'Jon', 'Jan']);

  return (
    <div>
      {/* ✅ check if array before calling `map()` */}
      {Array.from(users).map(user => (
        <div key={user}>{user}</div>
      ))}
    </div>
  );
}

export default App;

map()如果我们试图直接在对象上调用该方法Set，则会出现错误，因此我们必须
在调用之前Set使用该方法将 转换为数组。Array.frommap()

在处理其他类似数组的对象（如
NodeList.

结论

“TypeError: cannot read properties ‘map’ of null”错误发生在我们对map()一个null值调用方法时，最常见的情况是将状态变量初始化为null.

要解决该错误，请将要映射的值初始化为空数组。

额外资源

您可以通过查看以下教程来了解有关相关主题的更多信息：