React報錯之map() is not a function

正文從這開始~

總覽

當我們對一個不是陣列的值呼叫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>
      {/*