在 react 中单击按钮获取数据-ag捕鱼王app官网

要在 react 中单击按钮获取数据：

1. 在按钮元素上设置 onclick 属性。
2. 每次单击该按钮时，都会发出一个 http 请求。
3. 更新状态变量并渲染数据。

如果我们使用 axios，请向下滚动到下一个代码片段。

import {usestate} from 'react';
const app = () => {
  const [data, setdata] = usestate({data: []});
  const [isloading, setisloading] = usestate(false);
  const [err, seterr] = usestate('');
  const handleclick = async () => {
    setisloading(true);
    try {
      const response = await fetch('https://reqres.in/api/users', {
        method: 'get',
        headers: {
          accept: 'application/json',
        },
      });
      if (!response.ok) {
        throw new error(`error! status: ${response.status}`);
      }
      const result = await response.json();
      console.log('result is: ', json.stringify(result, null, 4));
      setdata(result);
    } catch (err) {
      seterr(err.message);
    } finally {
      setisloading(false);
    }
  };
  console.log(data);
  return (
    <div>
      {err && <h2>{err}h2>}
      <button onclick={handleclick}>fetch databutton>
      {isloading && <h2>loading...h2>}
      {data.data.map(person => {
        return (
          <div key={person.id}>
            <h2>{person.email}h2>
            <h2>{person.first_name}h2>
            <h2>{person.last_name}h2>
            <br />
          div>
        );
      })}
    div>
  );
};
export default app;

我们在按钮元素上设置了 onclick 属性，因此每次单击按钮时，都会调用 handleclick 函数。

我们将 handleclick 函数标记为异步，因此我们可以使用 await 关键字来等待其中的 promises。

在 handleclick 函数中，我们等待 http 请求完成并更新状态变量。

此示例使用本机 fetch api，但如果我们也使用 axios 包，该概念也适用。

这是使用 axios 包在单击按钮时获取数据的方法。

如果我们决定使用 axios，请确保通过运行 npm install axios 安装了该软件包。

import {usestate} from 'react';
import axios from 'axios';
const app = () => {
  const [data, setdata] = usestate({data: []});
  const [isloading, setisloading] = usestate(false);
  const [err, seterr] = usestate('');
  const handleclick = async () => {
    setisloading(true);
    try {
      const {data} = await axios.get('https://reqres.in/api/users', {
        headers: {
          accept: 'application/json',
        },
      });
      console.log('data is: ', json.stringify(data, null, 4));
      setdata(data);
    } catch (err) {
      seterr(err.message);
    } finally {
      setisloading(false);
    }
  };
  console.log(data);
  return (
    <div>
      {err && <h2>{err}h2>}
      <button onclick={handleclick}>fetch databutton>
      {isloading && <h2>loading...h2>}
      {data.data.map(person => {
        return (
          <div key={person.id}>
            <h2>{person.email}h2>
            <h2>{person.first_name}h2>
            <h2>{person.last_name}h2>
            <br />
          div>
        );
      })}
    div>
  );
};
export default app;

如果我们使用 axios，请确保通过在项目的根目录中运行 npm install axios 来安装包。

使用 axios 包时的语法更简洁一些，我们需要处理的实现细节更少，但概念是一样的。

我们必须在按钮元素上设置 onclick 属性，并在每次单击按钮时发出 http 请求。