如何在React中使用4个不同的数据终点创建一个刷新按钮？

Question

我创建了一个具有4个不同端点（app.js）的（table.js）上的表，我想添加一个刷新按钮，该按钮在单击时会刷新数据。我将如何使用4个不同的端点进行操作？我确实尝试了间隔，但它刷新了整个页面。 这是我的app.file，从中获取数据。

  function App() {
  const [feed, setFeed] = useState([]);
  const [feedol, setFeedol] = useState([]);
  const [jsonData, setJsonData] = useState([]);
  const [azureData, setAzureData] = useState([]);

  useEffect(() => {
  fetch("/feed").then((response) =>
   response.json().then((data) => {
     setFeed(data);
   })
   );
  }, []);
   useEffect(() => {
   fetch("/feed_ol").then((response) =>
   response.json().then((data) => {
      setFeedol(data);
    })
   );
  }, []);

  useEffect(() => {
  fetch("/json_data").then((response) =>
    response.json().then((data) => {
    setJsonData(data["archive"][0]);
    })
  );
  }, []);

    useEffect(() => {
    fetch("/azure_data").then((response) =>
    response.json().then((data) => {
    setAzureData(data);
    })
  );
 }, []);

   
  Table.js

  import React from "react";
  import { Card, Container } from "react-bootstrap";
  import { BsArrowClockwise } from "react-icons/bs";
  import Cards from "./Cards";

  import "./tables.css";
   export const Tables = ({ feed, feedol, jsonData, azureData, refresh 
 }) => {
   return (
    <Container>
    <Cards />
     <Card className="table-card">
      <Card.Header>
         {" "}
        <button type="button" className=" refresh-button" onClick= 
        {}>
        {" "}
        <BsArrowClockwise />
       </button>{" "}
       OneLogin Outages{" "}
       </Card.Header>
       <Card.Body>
        <table className="table table-bordered">
           <thead>
           <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
            <tr>
             <td>{feedol.title}</td>
             <td>{feedol.link}</td>
             <td>{feedol.updated}</td>
             </tr>
            <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
            </tr>
            <tr>
            <td>{jsonData.service_name}</td>
            <td>{jsonData.summary}</td>
            <td>{jsonData.date}</td>
          </tr>
          </tbody>
        </table>
       </Card.Body>
       </Card>
      <Cards />
      <Card className="table-card">
       <Card.Header> Unifi Outages </Card.Header>
       <Card.Body>
         <table className="table table-bordered">
           <thead>
             <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{feed.title}</td>
            <td>{feed.link}</td>
            <td>{feed.updated}</td>
          </tr>
          <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
          </tr>
          <tr>
            <td>{azureData.title}</td>
            <td>{azureData.link}</td>
            <td>{azureData.updated}</td>
            </tr>
           </tbody>
         </table>
        </Card.Body>
        </Card>
       </Container>
           );
            };

Answer 1

刷新有多复杂，将其全部放入一个函数：

const App = () => {

  const fetchAndSet = () => {
    // all the fetch and sets
  }

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

  return <Table refresh={fetchAndSet} />;
}

Answer 2

如果您的fetch操作取决于单击，则请勿使用useffect作为useFeffect用于同步状态。

const URLS = {
  feed: '/feed',
  feedol: '/feed_ol',
  jsonData: '/json_data',
  azureData: '/azure_data'
}

function App() {


  const [data, setData] = useState({
    feed: [],
    feedol: [],
    jsonData: [],
    azureData: []

  })

  //reusable function
  const handleFetch = (type) => {
     fetch(URLS[type]).then((response) =>
       response.json().then((data) => {
         setData(d => ({
           ...d, [type]: data
        }));
      })
   }
   
  //Table.js

  import React from "react";
  import { Card, Container } from "react-bootstrap";
  import { BsArrowClockwise } from "react-icons/bs";
  import Cards from "./Cards";

  import "./tables.css";
   export const Tables = ({ feed, feedol, jsonData, azureData, handleFetch
 }) => {
   return (
    <Container>
    <Cards />
     <Card className="table-card">
      <Card.Header>
         {" "}
        <button type="button" className=" refresh-button" onClick={
          () => {Object.keys(URLS).map(handleFetch)}
        }>
        {" "}
        <BsArrowClockwise />
       </button>{" "}
       OneLogin Outages{" "}
       </Card.Header>
       <Card.Body>
        <table className="table table-bordered">
           <thead>
           <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
            <tr>
             <td>{feedol.title}</td>
             <td>{feedol.link}</td>
             <td>{feedol.updated}</td>
             </tr>
            <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
            </tr>
            <tr>
            <td>{jsonData.service_name}</td>
            <td>{jsonData.summary}</td>
            <td>{jsonData.date}</td>
          </tr>
          </tbody>
        </table>
       </Card.Body>
       </Card>
      <Cards />
      <Card className="table-card">
       <Card.Header> Unifi Outages </Card.Header>
       <Card.Body>
         <table className="table table-bordered">
           <thead>
             <tr>
            <th>Title</th>
            <th>Link</th>
            <th>Date</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>{feed.title}</td>
            <td>{feed.link}</td>
            <td>{feed.updated}</td>
          </tr>
          <tr>
            <td>{}</td>
            <td>{}</td>
            <td>{}</td>
          </tr>
          <tr>
            <td>{azureData.title}</td>
            <td>{azureData.link}</td>
            <td>{azureData.updated}</td>
            </tr>
           </tbody>
         </table>
        </Card.Body>
        </Card>
       </Container>
  );
};