Javascript 当想要获取初始数据并稍后使用按钮更新它时，getInitialProps 不会将数据发送到页面组件

像getServerSideProps和getStaticProps这样的方法用于获取服务器上的数据，但它们只适用于pages文件夹内的页面组件(在Next.js中设置路由的初始方式).

由于Next.js 13，在app目录中，我们有Server Components个，您可以在其中直接在组件体中获取数据，您想要实现的操作如下所示(请注意创建的附加文件):

// app/page.js ??

import Users from "./users";

export default async function Page() {
  const req = await fetch("https://randomuser.me/api/?gender=female&results=10");
  const data = await req.json();

  return <Users initialUsers={data.results} />;
}

您需要下面的附加组件，因为您需要客户端交互(这里是onClick处理程序)，这是上面的服务器Page组件中不具备的.

// app/users.js ??

"use client";

import { useEffect, useState } from "react";

export default function Users({ initialUsers }) {
  const [data, setData] = useState(initialUsers);

  const handleClick = async (event) => {
    event.preventDefault();
    const req = await fetch("https://randomuser.me/api/?gender=male&results=100");
    const newData = await req.json();
    setData(newData.results);
  };

  return (
    <div>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map((user, index) => {
        return (
          <div key={index}>
            {user.email}
            <img src={user.picture.medium} alt="" />
          </div>
        );
      })}
    </div>
  );
}

否则，因为您的页面已经是顶部有"use client"的客户端组件，所以您可以简单地使用useEffect来加载初始数据，如下所示:

// app/page.js ??

"use client";

import { useEffect, useState } from "react";

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

  const handleClick = async (event) => {
    event.preventDefault();
    const req = await fetch("https://randomuser.me/api/?gender=male&results=100");
    const newData = await req.json();
    setData(newData.results);
  };

  useEffect(() => {
    fetch("https://randomuser.me/api/?gender=female&results=10")
      .then((res) => res.json())
      .then((data) => {
        setData(data.results);
      });
  }, []);

  return (
    <div>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map((user, index) => {
        return (
          <div key={index}>
            {user.email}
            <img src={user.picture.medium} alt="" />
          </div>
        );
      })}
    </div>
  );
}