类型错误：map() 不是 React 中的函数

作者

TypeError: map() 不是 React 中的函数

TypeError: map() is not a function in React

“TypeError: map is not a function”发生在我们map()对一个不是数组的值调用方法时。要解决该错误，console.log您调用该map()方法的值并确保仅调用map有效数组。

地图不是一个函数反应

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

应用程序.js
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方法的值并确保它是一个有效的数组。

应用程序.js
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
方法有条件地检查值是否为数组
。

应用程序.js
const App = () => {
  const obj = {};

  return (
    <div>
      {Array.isArray(obj)
        ? obj.map(element => {
            return <h2>{element}</h2>;
          })
        : null}
    </div>
  );
};

export default App;

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

如果该值是一个数组，我们返回对其调用map方法的结果，否则我们返回null。这样你就不会得到错误，即使值不是数组。

如果该值是从远程服务器获取的，请通过将其记录到控制台来确保它是您期望的类型，并确保在调用其map方法之前已将其解析为本机 JavaScript 数组。

如果您有一个类似数组的对象，您试图在调用该map方法之前将其转换为数组，请使用该Array.from()方法。

应用程序.js
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方法之前，我们将值转换为数组。这也适用于类似数组的对象，例如NodeList调用
getElementsByClassName方法返回的对象。

如果您尝试遍历一个对象，请使用该Object.keys()方法获取对象键的数组，您可以在该数组上调用该map()方法。

应用程序.js
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
方法获取对象键的数组。

应用程序.js
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()在数组上调用该方法，因此我们需要获取对象键的数组或对象的值。

结论

“TypeError: map is not a function”发生在我们map()对一个不是数组的值调用方法时。要解决该错误，console.log您调用该map()方法的值并确保仅调用map有效数组。

–

发表评论