Reactjs - 数据被多次获取

Question

大家好，我最近开始使用 React，我有一个简单的问题，我有一个应该获取内容并将响应存储在变量数据中的函数。页面加载后，当我控制台记录它时，我看到数据被多次获取，当我刷新它时，它又加载了几次。我该如何解决这个问题？

import {useQuery} from "react-query";
import axios from "axios";

const fetchBrands = async () =>{
     const res = await axios.get("APIURL");
    return res.data;
}
export default function LoadBrands() {
    const {data, status} = useQuery('getbrand', fetchBrands);
    return(
    <>
     {status === 'loading' && <div>Loading</div>}
      {status === 'error' && <div>Error Loading</div>}
      {status === 'success' && <div>YUPP</div>}
      {console.log(data)}
    </>
    )
}

Answer 1

所以嘿，这里几乎没有错您正在使用 react-query 但您没有使用任何查询缓存，如果状态发生变化，则在每次重新渲染时调用 api。

此外， View 层的 console.log 也不能很好地表明它正在获取数据fethbrand 函数的控制台更加准确

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import ReactDOM from "react-dom";
import { useQuery, QueryCache, ReactQueryCacheProvider } from "react-query";
import axios from "axios";

const queryCache = new QueryCache();

const fetchBrands = async () => {
  const res = await axios.get(
    "https://api.github.com/repos/tannerlinsley/react-query"
  );
  console.log("test here if it will call api");
  return res.data;
};

function LoadBrands() {
  const { data, status } = useQuery("getbrand", fetchBrands);
  return (
    <>
      {status === "loading" && <div>Loading</div>}
      {status === "error" && <div>Error Loading</div>}
      {status === "success" && <div>YUPP</div>}
      {console.log(data)}
    </>
  );
}

export default function App() {
  return (
    <ReactQueryCacheProvider queryCache={queryCache}>
      <LoadBrands />
    </ReactQueryCacheProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

这是 fiddle :https://codesandbox.io/s/bold-dawn-huudy?file=/src/index.js