标签：map 调用 return App React 报错 数组 const

正文从这开始~

总览

当我们对一个不是数组的值调用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>
      {/* 
 
 
标签：map,调用,return,App,React,报错,数组,const	

来源： https://www.cnblogs.com/chuckQu/p/16545520.html 


本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。