get data on button click in react-ag捕鱼王app官网

to get data on button click in react:

1. set the property on the button element onclick.
2. each time the button is clicked, an http request is made.
3. update state variables and render data.

if we use axios, please scroll down to the next code snippet.

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>}
      <buttononclick={handleclick}>fetch databutton>
      {isloading && <h2>loading...h2>}
      {data.data.map(person => {
        return (
          <divkey={person.id}><h2>{person.email}h2><h2>{person.first_name}h2><h2>{person.last_name}h2><br />div>
        );
      })}
    div>
  );
};

export default app;

we set onclickthe property on the button element, so every time the button is clicked, handleclickthe function will be called.

we handleclickmarked the function as async so we can use awaitthe await keyword to await the promises inside it.

in handleclickthe function, we wait for the http request to complete and update the state variable.

this example uses the native fetch api, but the concept applies if we also use the axios package.

this is axioshow you use the package to get data when a button is clicked.

if we decide to use axios, make sure npm install axiosthe package is installed by running.

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>}
      <buttononclick={handleclick}>fetch databutton>
      {isloading && <h2>loading...h2>}
      {data.data.map(person => {
        return (
          <divkey={person.id}><h2>{person.email}h2><h2>{person.first_name}h2><h2>{person.last_name}h2><br />div>
        );
      })}
    div>
  );
};

export default app;

if we use that axios, make sure to install the package by running in the root directory of the project npm install axios.

the syntax is a little cleaner when using axiosthe package, and we have to deal with fewer implementation details, but the concept is the same.

we have to set the attribute on the button element onclickand make an http request every time the button is clicked.