Next.js、Strapi - 获取响应为空

Question

我有 nextjs 前端从 strapi 后端获取数据。问题是数据是空的，即使我可以在 strapi 开发日志上看到已经发出请求。

这是next.js代码

import { useRouter } from "next/router";
import React, { useEffect } from "react";

const Room = () => {
  const router = useRouter();
  let fetchData;

  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
    }
  }, [router]);

  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id=" + router.query.id)
        .then((response) => response.json())
        .then((data) => (fetchData = data));
      console.log(fetchData);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div>
      <p>{router.query.id}</p>
      <p>{fetchData}</p>
    </div>
  );
};

export default Room;

这里是 strapi 日志

[2021-02-23T14:06:20.845Z] debug GET /rooms?_id=6034aac1ba63472e9878ed25 (27 ms) 200

但是我不知道为什么数据是空的。事实上，响应由 base64 长文本组成，但我不确定这是否会导致问题。在此先感谢您的帮助。

Answer 1

const Room = () => {
  const router = useRouter();
  //let fetchData;
  const [fetchData, setFetchData] = React.useState('');
  useEffect(() => {
    if (router.asPath !== router.route) {
      getDataNames();
    }
  }, [router]);

  const getDataNames = () => {
    try {
      fetch("http://localhost:1337/rooms?_id=" + router.query.id)
        .then((response) => response.json())
        .then((data) => { setFetchData(data); });
      console.log(fetchData);
    } catch (e) {
      console.error(e);
    }
  };

  return (
    <div>
      <p>{router.query.id}</p>
      <p>{fetchData}</p>
    </div>
  );
};

您可以对 React 状态使用 useState 钩子。

Answer 2

fetch 和设置状态都是异步的，因此您的代码将进入 console.log(fetchData); 而获取和设置状态仍然是运行.

如果您在 fetchData 更改时添加另一个 useEffect，您将看到更新后的值。

useEffect(() => {
  console.log(fetchData);
}, [fetchData]);

Next.js、Strapi - 获取响应为空

Next.js, Strapi - Fetch response is empty

javascript

fetch

reactjs

strapi

next.js