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

单击按钮后，我无法将数据加载到组件。 我使用

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 };
};

导出默认函数用户（{data}）{
const fetchData=async（）=>{
const req=等待提取（“https://randomuser.me/api/?gender=male&results=100");
const data=wait req.json（）；
返回{data:data.results}；
};
常量handleClick=（事件）=>{
event.preventDefault（）；
fetchData（）；
};
返回(
获取数据
{data.map（（用户）=>{
返回(
{user.email}
);
})}
);
}
Users.getInitialProps=async（）=>{
const req=等待取数(
"https://randomuser.me/api/?gender=female&results=10"
);
const data=wait req.json（）；
返回{data:data.results}；
};

---

非常感谢你的帮助

使用

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 };
};

从'React'导入{useState}；
导出默认函数用户（{initialData}）{
const[data，setData]=使用状态（initialData）；
const fetchData=async（）=>{
const req=等待取数（'https://randomuser.me/api/?gender=male&results=100');
const newData=wait req.json（）；
返回setData（newData.results）；
};
常量handleClick=（事件）=>{
event.preventDefault（）；
fetchData（）；
};
返回(
获取数据
{data.map（（用户）=>{
返回(
{user.email}
);
})}
);
}
Users.getInitialProps=async（）=>{
const req=等待取数（'https://randomuser.me/api/?gender=female&results=10');
const data=wait req.json（）；
返回{initialData:data.results}；
};

旁注：这似乎是正确的：

推荐：或

如果您使用的是Next.js 9.3或更新版本，我们建议您使用

getStaticProps

或

getServerSideProps

而不是

getInitialProps

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

---

建议现在使用getStaticProps或getServerSideProps

从'React'导入{useState}；
导出默认函数用户（{initialData}）{
const[data，setData]=使用状态（initialData）；
const fetchData=async（）=>{
const req=等待取数（'https://randomuser.me/api/?gender=male&results=100');
const newData=wait req.json（）；
setData（newData.results）；
};
常量handleClick=（事件）=>{
event.preventDefault（）；
fetchData（）；
};
返回(
获取数据
{data.map（用户=>{
返回(
{user.email}
);
})}
);
}
Users.getInitialProps=async（）=>{
const req=等待取数（'https://randomuser.me/api/?gender=female&results=10');
const data=wait req.json（）；
返回{initialData:data.results}；
};

我想列出我对乔治代码的注释。至少，它应该关注它们

首先，它应该将任何键附加到div元素，否则浏览器控制台中将出现警告。下面是一篇关于使用密钥的文章：

此外，可以从不返回响应的

fetchData

函数中删除关键字

return

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();

    setData(newData.results);
  };

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

  return (
    <Layout>
      <button onClick={handleClick}>FETCH DATA</button>
      {data.map(user => {
        return (
          <div key={user.login.uuid}>
            {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 };
};