Нажмите кнопку js refre sh и загрузите новый набор данных. - PullRequest
Новая
       65

Нажмите кнопку js refre sh и загрузите новый набор данных.

0 голосов
/ 25 февраля 2020

Я новичок в Реакте js. Я получил один данные из открытого API с помощью express сервера. Я успешно просматриваю случайный текст кота для моего компонента реакции. Теперь я хочу создать кнопку, которая будет получать новый набор фактов о кошках. В то время как внешний интерфейс извлекает данные, он должен отображать загрузочный счетчик вместо результатов. Когда результаты получены, счетчик должен быть скрыт, и результаты отображаются. Если при извлечении данных возникают ошибки, сообщение об ошибке должно быть зарегистрировано с console.log.

Это мой сервер, который отлично работает. 

const express = require("express");
const app = express();
const port = process.env.PORT || 5000;
const axios = require("axios");
const morgan = require("morgan");
const cors = require("cors");

app.use(morgan("common"));
app.use(cors());
app.get("/cat", async (req, res, next) => {
  axios
    .get("https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=5")
    .then(response => res.send(response.data))
    .catch(err => {
      console.log(err);
      res.status(500).send(err);
    });
});

app.listen(port, () => console.log(`Example app listening on port ${port}!`));

Это мой компонент React. 

  import React, { useEffect, useState } from "react";

  const Home = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchdata();
  }, []);

  const fetchdata = async () => {
    const response = await fetch("http://localhost:5000/cat");
    const data = await response.json();
    console.log(data);
    setData(data);
  };

  return (
    <div className="bg-color">
      {data.map(facts => {
        return (
          <ul>
            <li>{facts.text}</li>
          </ul>
        );
      })}
      <button>new data</button> //IN HERE I WANT to FETCH NEW DATA and showing loading spinner.
    </div>
  );
};

export default Home;

1 Ответ

0 голосов
/ 25 февраля 2020

Измените свой компонент следующим образом: 

import React, { useEffect, useState } from "react";

const Home = () => {
  const [data, setData] = useState([]);
  const [loadingData, setLoadingData] = useState(false);

  useEffect(() => {
    fetchdata();
  }, []);

  const fetchdata = async () => {
    setLoadingData(true);
    const response = await fetch("http://localhost:5000/cat");
    const data = await response.json();
    console.log(data);
    setData(data);
    setLoadingData(false);
  };

  return (
    <div className="bg-color">
      {data.map(facts => {
        return (
          <ul>
            <li>{facts.text}</li>
          </ul>
        );
      })}
      {!loadingData && <button onClick={() => fetchdata()}>new data</button>}
      {loadingData && <span>Loading...</span>}
    </div>
  );
};

export default Home;
...