如何在React中創建具有4個不同資料端點的重繪按鈕？

我在（table.js）上創建了一個具有 4 個不同端點（app.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>
           );
            };

uj5u.com熱心網友回復：

不管重繪 有多復雜，都放在一個函式中：

const App = () => {

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

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

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

uj5u.com熱心網友回復：

如果您的fetch操作依賴于單擊，請不要使用useEffectasuseEffect用于同步狀態。

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

標籤：javascript html 反应 反应式

上一篇：從其他組件回傳資料[ReactNative/React]

下一篇：使用react-native-app-authnpm包使用Office365登錄ReactNativeApp