React新手求助：如何解决TypeError: items.map is not a function问题

我是React JS初学者，开发在线餐饮预购前端程序时，运行App.js频繁遇到TypeError: items.map 不是一个函数错误，相关代码如下：

import React, { useState, useEffect } from "react";
import axios from "axios";

function App() {
  const [items, setItems] = useState([]);
  const [cart, setCart] = useState([]);

  useEffect(() => {
    axios.get("/api/items").then((response) => setItems(response.data));
  }, []);

  const addToCart = (item) => {
    setCart([...cart, item]);
  };

  const removeFromCart = (item) => {
    setCart(cart.filter((i) => i.id !== item.id));
  };

  const submitOrder = () => {
    const order = {
      customer: {
        firstName: "",
        lastName: "",
        email: "",
        phoneNumber: "",
      },
      items: cart,
      paymentMethod: "CASH",
    };
    axios.post("/api/orders", order).then(() => setCart([]));
  };

  return (
    <div>
      <h1>Food and Beverage Items</h1>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.name} ({item.price}){" "}
            <button onClick={() => addToCart(item)}>Add to Cart</button>
          </li>
        ))}
      </ul>
      <h1>Cart</h1>
      <ul>
        {cart.map((item) => (
          <li key={item.id}>
            {item.name} ({item.price}){" "}
            <button onClick={() => removeFromCart(item)}>Remove</button>
          </li>
        ))}
      </ul>
      <button onClick={submitOrder}>Submit Order</button>
    </div>
  )}
    
export default App;

错误原因 #

这个错误说明items变量不是数组——只有数组能调用map方法。虽然初始useState设置了空数组，但axios请求返回的response.data可能不是数组（比如是对象、null、undefined，或者API返回了错误格式的数据），导致setItems后items变成非数组类型，调用map就会报错。

解决办法 #

1. 验证API返回格式
   在axios的then回调里打印返回数据，确认是否为数组：

   useEffect(() => {
     axios.get("/api/items").then((response) => {
       console.log('API返回数据:', response.data);
       setItems(response.data);
     });
   }, []);
   

   如果打印结果不是数组，需要调整后端API，让它返回数组格式的菜品列表。

2. 给数据加兜底处理
   不管API返回什么，确保items始终是数组：

   useEffect(() => {
     axios.get("/api/items")
       .then((response) => setItems(Array.isArray(response.data) ? response.data : []))
       .catch(error => {
         console.error('请求菜品列表失败:', error);
         setItems([]);
       });
   }, []);
   

   同时在渲染时增加判断，确保只有数组才调用map：

   <ul>
     {Array.isArray(items) && items.map((item) => (
       <li key={item.id}>
         {item.name} ({item.price}){" "}
         <button onClick={() => addToCart(item)}>Add to Cart</button>
       </li>
     ))}
   </ul>
   

3. 处理请求错误
   给axios请求添加catch回调，避免请求失败时items被设置为错误对象，导致后续渲染报错。

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