React報(bào)錯(cuò)map()?is?not?a?function的原因是什么

本篇內(nèi)容主要講解“React報(bào)錯(cuò)map() is not a function的原因是什么”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“React報(bào)錯(cuò)map() is not a function的原因是什么”吧!

總覽

當(dāng)我們對(duì)一個(gè)不是數(shù)組的值調(diào)用map()方法時(shí)，就會(huì)產(chǎn)生"TypeError: map is not a function"錯(cuò)誤。為了解決該錯(cuò)誤，請(qǐng)將你調(diào)用map()方法的值記錄在console.log上，并確保只對(duì)有效的數(shù)組調(diào)用map。

這里有個(gè)示例來(lái)展示錯(cuò)誤是如何發(fā)生的。

const App = () => {
  const obj = {};
  // ?? Uncaught TypeError: map is not a function
  return (
    <div>
      {obj.map(element => {
        return <h3>{element}</h3>;
      })}
    </div>
  );
};
export default App;

我們?cè)谝粋€(gè)對(duì)象上調(diào)用Array.map()方法，得到了錯(cuò)誤反饋。

為了解決該錯(cuò)誤，請(qǐng)console.log你調(diào)用map方法的值，確保它是一個(gè)有效的數(shù)組。

export default function App() {
  const arr = ['one', 'two', 'three'];
  return (
    <div>
      {arr.map((element, index) => {
        return (
          <div key={index}>
            <h3>{element}</h3>
          </div>
        );
      })}
    </div>
  );
}

Array.isArray

你可以通過(guò)使用Array.isArray方法，來(lái)有條件地檢查值是否為數(shù)組。

const App = () => {
  const obj = {};
  return (
    <div>
      {Array.isArray(obj)
        ? obj.map(element => {
            return <h3>{element}</h3>;
          })
        : null}
    </div>
  );
};
export default App;

如果值為數(shù)組，則返回對(duì)其調(diào)用map方法的結(jié)果，否則返回null。這種方式不會(huì)得到錯(cuò)誤，即使值不是一個(gè)數(shù)組。

如果值是從遠(yuǎn)程服務(wù)中獲取，請(qǐng)確保它是你期望的類(lèi)型，將其記錄到控制臺(tái)，并確保你在調(diào)用map方法之前將其解析為一個(gè)原生JavaScript數(shù)組。

Array.from

如果有一個(gè)類(lèi)數(shù)組對(duì)象，在調(diào)用map方法之前你嘗試轉(zhuǎn)換為數(shù)組，可以使用Array.from()方法。

const App = () => {
const set = new Set(['one', 'two', 'three']);
return (
  <div>
    {Array.from(set).map(element => {
      return (
        <div key={element}>
          <h3>{element}</h3>
        </div>
      );
    })}
  </div>
);
};
export default App;

在調(diào)用map方法之前，我們將值轉(zhuǎn)換為數(shù)組。這也適用于類(lèi)數(shù)組的對(duì)象，比如調(diào)用getElementsByClassName方法返回的NodeList。

Object.keys

如果你嘗試迭代遍歷對(duì)象，使用Object.keys()方法獲取對(duì)象的鍵組成的數(shù)組，在該數(shù)組上可以調(diào)用map()方法。

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}>
            <h3>
              {key}: {employee[key]}
            </h3>

            <hr />
          </div>
        );
      })}
      <br />
      <br />
      <br />

      {/* ????? iterate object VALUES */}
      {Object.values(employee).map((value, index) => {
        return (
          <div key={index}>
            <h3>{value}</h3>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

我們使用Object.keys方法得到對(duì)象的鍵組成的數(shù)組。

const employee = {
  id: 1,
  name: 'Alice',
  salary: 100,
};

// ????? ['id', 'name', 'salary']
console.log(Object.keys(employee));

// ????? [1, 'Alice', 100]
console.log(Object.values(employee));

我們只能在數(shù)組上調(diào)用map()方法，所以我們需要獲得一個(gè)對(duì)象的鍵或者對(duì)象的值的數(shù)組。

到此，相信大家對(duì)“React報(bào)錯(cuò)map() is not a function的原因是什么”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢(xún)，關(guān)注我們，繼續(xù)學(xué)習(xí)！