React中products.map不是函数的原因：API数据已获取却无法渲染

以下是导致该错误的核心原因：

• 初始状态类型不匹配
  若你给products的初始状态设为null、undefined或对象（而非空数组），组件首次渲染时会直接使用这个初始值调用map方法。由于只有数组拥有map方法，非数组值调用该方法就会触发报错。
  错误示例：

  const [products, setProducts] = useState(null);
  

  正确写法：

  const [products, setProducts] = useState([]);
  

• 接口数据解构错误
  https://dummyjson.com/products返回的数据结构为{ products: Array<Product>, ... }，即整个响应是一个包含products数组的对象。若你直接把整个响应对象赋值给products状态，products会变成一个对象而非数组，自然无法调用map方法。
  错误示例：

  useEffect(() => {
    fetch('https://dummyjson.com/products')
      .then(res => res.json())
      .then(data => setProducts(data));
  }, []);
  

  正确写法：

  useEffect(() => {
    fetch('https://dummyjson.com/products')
      .then(res => res.json())
      .then(data => setProducts(data.products));
  }, []);
  

• 异步渲染时序问题
  即便console.log(data)能打印出正确数据，组件首次渲染时products仍可能是初始的非数组值（比如undefined），此时执行products.map()会直接触发报错。解决方式是在调用map前添加存在性判断：

  {products?.map(product => (
    <div key={product.id}>{product.title}</div>
  ))}
  

  或

  {products && products.map(product => (
    <div key={product.id}>{product.title}</div>
  ))}
  

内容的提问来源于stack exchange，提问作者World Wide Tech