NextJs 从 api 问题获取数据

Question

我有一个简单的 NextJs typescript 应用程序和应用程序路由器。

我有以下代码，运行良好：

export default async function Page() {
  const res = await fetch("https://api.github.com/repos/vercel/next.js");
  const data = await res.json();

  return (
    <>
      <div>Hello from GetData</div>
      <div>
        <p>{data.id}</p>
      </div>
    </>
  );
}

但是如果我将 API URL 更改为：

，它就会停止工作

https://jsonplaceholder.typicode.com/posts/1 或任何其他 API，例如https://api.sampleapis.com/coffee/hot 和 https://jsonplaceholder.typicode.com/users

我还使用了端点类型来获取响应数组

type User = {
  id: number;
  name: string;
};
const data: User[] = await res.json();

Answer 1

在 React/Next 中，组件不是设计为异步。虽然从技术上讲您可以使功能组件成为异步功能，但它不会按预期工作。 React 期望组件同步返回

JSX

。我不确定给定的代码在第一个场景中如何工作（据我所知，它不应该）。

以下是如何使用函数组件和

useEffect

钩子获取数据：

export default async function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
        const data = await response.json();
        setData(data);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchData();
  }, []);

  return (
    <>
      <div>Hello from GetData</div>
      {data && (
        <div>
          <p>{data.id}</p>
        </div>
      )}
    </>
  );
}