Next.js响应数据缺失

wxclj1h5 于 2023-11-18 发布在其他

关注(0)|答案(1)|浏览(116)

我真的不知道我的代码到底出了什么问题，它没有显示在我的网站上获取的数据。当我使用console.log(data)时，它获取数据没有任何问题，但当我编写src={data.img1}时，它什么也没有显示。

async function getData() {
  const res = await fetch("http://localhost:3000/api/games");

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

  return res.json();
}

const Games = async () => {
  const data = await getData();
  console.log(data);
  return (
    <div className={styles.container}>
      <div className={styles.container}>
        <Image src={data.img1} alt="..." width={500} height={500} />
      </div>
    </div>
  );
};

export default Games;

字符串
如何查看返回的数据？

next.js

来源：https://stackoverflow.com/questions/77451892/next-js-response-data-missing

1条答案

按热度按时间

oiopk7p51#

这不是处理API调用和基于API数据返回JSX的正确方法。
您需要使用useEffect钩子在挂载时调用API，并使用useState钩子将数据存储在状态中。
下面是相同的实现

const [data, setData] = useState(null);

const getData = async () => {
  const res = await fetch("http://localhost:3000/api/games");
  if (!res.ok) {
    throw new Error("Failed to fetch data");
  } else {
    const games = res.json();
    setData(games);
  }
};

useEffect(() => {
  getData();
}, []);

return (
  <div className={styles.container}>
    <div className={styles.container}>
      <Image src={data?.img1} alt="..." width={500} height={500} />
    </div>
  </div>
);

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

Next.js响应数据缺失

1条答案

相关问题

热门标签

最新问答