NextJS如何在点击事件后获取数据？

Question

单击按钮后，我在将数据加载到组件时遇到问题。我习惯 getInitialProps先在页面上加载数据。

{data}单击后如何加载新数据并将其传递到？

export default function Users({ data }) {
  const fetchData = async () => {
    const req = await fetch("https://randomuser.me/api/?gender=male&results=100");
    const data = await req.json();

    return { data: data.results };
  };
  const handleClick = (event) => {
    event.preventDefault();

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

Users.getInitialProps = async () => {
  const req = await fetch(
    "https://randomuser.me/api/?gender=female&results=10"
  );
  const data = await req.json();
  return { data: data.results };
};

非常感谢帮助！

Answer 1

使用useState默认值是您最初通过getInitialProps以下方式检索的数据：

import { useState } from 'React';

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

    const fetchData = async () => {
        const req = await fetch('https://randomuser.me/api/?gender=male&results=100');
        const newData = await req.json();

        return setData(newData.results);
    };

    const handleClick = (event) => {
        event.preventDefault();
        fetchData();
    };

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

Users.getInitialProps = async () => {
    const req = await fetch('https://randomuser.me/api/?gender=female&results=10');
    const data = await req.json();
    return { initialData: data.results };
};

旁注：时代变了，似乎user1665355确实是正确的：

推荐：getStaticProps或getServerSideProps

如果您使用 Next.js 9.3 或更新版本，我们建议您使用 getStaticProps或getServerSideProps代替getInitialProps。

这些新的数据获取方法允许您在静态生成和服务器端渲染之间进行精细的选择。