如何在nextjs 14中使用map()？

Question

我正在尝试使用 map() 方法迭代从 API 获得的响应，但我不断收到错误“drinks.map 不是函数”。下面是我的代码

/饮料 从“@/components/DrinksList”导入 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);
  // throw error

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }
  const data = await response.json();
  return data;
};

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

  return (
    <div>
      <DrinksList drinks={data} />
    </div>
  );
};
export default Drinks;

/饮料/

我已经尝试检查是否有拼写错误

Answer 1

基本问题是 React 组件是同步。它们无法被声明

async

，因为这会隐式返回一个 Promise 对象，并且这不是要渲染到 DOM 的有效 JSX。

将异步逻辑包装在

useEffect

钩子中。如果您正在获取数据，那么您将需要某种状态来保存要呈现的数据，例如映射到有效的 JSX。

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);
  // throw error

  if (!response.ok) {
    throw new Error("Failed to fetch");
  }
  const data = await response.json();
  return data;
};

import { useEffect, useState } from 'react';

const Drinks = () => {
  // state to hold drinks array data, initially empty
  const [drinks, setDrinks] = useState([]);

  // fetch drinks data when the component mounts
  useEffect(() => {
    fetchDrinks()
      .then(data => {
        setDrinks(data.drinks); // <-- the array of drinks data
      })
      .catch(error => {
        // handle/ignore any caught errors/rejected Promises
      });
  }, []);

  return (
    <div>
      <DrinksList drinks={drinks} />
    </div>
  );
};

export default Drinks;

最好为

drinks

属性提供默认值，以防您渲染

DrinksList

组件并传递未定义的

drinks

属性。

const DrinksList = ({ drinks = [] }) => {
  ...

  return (
    ...
    {drinks.map(drink => (
      ...
    ))}
    ...
  );
};

Answer 2

我认为你需要像这样迭代

drinks

。因为

drinks

是一个数组，其第一个元素是一个名为

drinks

的对象，它又是一个对象数组。

所以我想你可以在

map()

上使用这样的

drinks

功能。

drinks[0]?.drinks.map((item, index) => {
        return <div key={index}>{item.strIngredient2}</div>;
      })