Next.js 14中用map()遍历API数据报错“drinks.map is not a function”求助

问题原因 #

你传入DrinksList组件的drinks是整个API响应对象，而非对象内的数组。TheCocktailDB返回的响应结构为{ drinks: [...] }，直接将这个对象传给子组件后，子组件调用drinks.map()时，因对象不存在map方法，导致错误抛出。

修复方案 #

1. 修改Drinks组件，传递正确的数组 #

在Drinks组件中，将data.drinks（而非整个data对象）传给DrinksList的drinks属性，同时处理data.drinks可能为undefined的情况（比如无搜索结果时）：

import DrinksList from "@/components/DrinksList";

const url = "https://www.thecocktaildb.com/api/json/v1/1/search.php?f=a";

const fetchDrinks = async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000));
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }

  const data = await response.json();
  return data;
};

const Drinks = async () => {
  const data = await fetchDrinks();

  // 传递drinks数组，若数组不存在则用空数组兜底
  return (
    <div>
      <DrinksList drinks={data.drinks || []} />
    </div>
  );
};
export default Drinks;

2. 子组件处理空数组情况（可选但推荐） #

在DrinksList组件中添加空数组判断，避免无数据时页面空白：

const DrinksList = ({ drinks }) => {
  if (drinks.length === 0) {
    return <p>没有找到饮品</p>;
  }

  return (
    <ul>
      {drinks.map((drink) => (
        <li key={drink.idDrink}>{drink.strDrink}</li>
      ))}
    </ul>
  );
};

export default DrinksList;

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