无法从数组渲染<li>至<ul>：Map is not a function错误求助

Common Causes & Fixes #

• Your "array" isn't actually an array
  The map() method only exists on arrays. If your variable is null, undefined, an object, or even a string, calling map() on it will throw this error. First, double-check what type of data you're working with by logging it:

  console.log("My data:", yourArrayVariable);
  console.log("Is it an array?", Array.isArray(yourArrayVariable));
  

  If it turns out to be an object (like maybe your API returns { results: [...] }), you'll need to access the actual array property first, e.g., yourArrayVariable.results.map(...).

• Async data loading race condition
  If you're fetching data from an API or loading it asynchronously, your variable might start off as null or undefined before the data arrives. When your component renders initially, it tries to call map() on that non-array value, hence the error. Fix this by:

  1. Setting an initial empty array state (if using a framework like React):

     const [items, setItems] = useState([]); // Start with empty array instead of null
     

  2. Adding a conditional check before mapping:

     <ul>
       {yourArrayVariable ? yourArrayVariable.map(item => (
         <li key={item.id}>{item.content}</li>
       )) : <li>Loading items...</li>}
     </ul>
     

  3. Using optional chaining and nullish coalescing for concise safety:

     <ul>
       {(yourArrayVariable ?? []).map(item => (
         <li key={item.id}>{item.content}</li>
       ))}
     </ul>
     

Quick Example of a Working Implementation #

Here's a full React example that avoids the error:

import { useState, useEffect } from 'react';

function ItemList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    // Simulate async data fetch
    fetch('https://api.example.com/items')
      .then(res => res.json())
      .then(data => setItems(data)); // Make sure data is an array!
  }, []);

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Just remember: always confirm your data is an array before calling map() on it, and handle the case where data isn't ready yet. That should squash the error!

内容的提问来源于stack exchange，提问作者user9345978