在项目开始时多次调用 api 并将它们保存在 React js 中的组件中的最佳方法是什么

Question

此代码工作正常，但它不会将引号添加到引号组件中，我也在尝试为未来的项目寻找更好的方法

  const fetchData = useCallback(async _ => {
    datas.current.push(await axios.get("https://www.breakingbadapi.com/api/quote/random"))
    return datas;
  }, []); 
  
  let quotes = <SwiperSlide className={SwiperCSS.swiperSlide}>Loading data...</SwiperSlide>;

  useEffect(()=>{
    if(calls < 6){
      if(ref.current){
        fetchData();
      }
    
      return ()=>{
        ref.current = true;
        setCalls(prevCalls => prevCalls + 1);
      }
    }
  })

  if(calls >= 6){
    quotes = datas.current.map((res)=>{
      console.log("QQQ", res.data.quote);
      <SwiperSlide className={SwiperCSS.swiperSlide}> {res.data.quote} </SwiperSlide>
    })

    console.log("Quotes", quotes);
  }

Answer 1

关于我的评论，这是我可能会如何解决这个问题。 您需要获取报价，并检查它是否已经在报价数组中。 如果它在那里，请进行另一个 API 调用，否则将其添加到数组中。

当阵列完全解析阵列，并将其添加到 state。

 function getQuotes() { const endpoint = 'https://breakingbadapi.com/api/quote/random'; return new Promise(resolve => { // Initialise quotes array const quotes = []; // Initialise the query count (async function loop(count = 1) { console.log(`Fetching quote ${count}`); // Fetch the and parse the data const response = await fetch(endpoint); const data = await response.json(); // `data` is an array of one object so // destructure it const [obj] = data; // Check if the quote exists in the quotes array const found = quotes.find(quote => { return quote.quote_id === obj.quote_id; }); // If it's not there push in the new quote if (.found) quotes;push(obj), // If the quotes array is not full make // another API call. otherwise resolve the // quotes array. I've throttled the the API // limit to one call per second in this example. if (quotes,length < 6) { setTimeout(loop, 1000; ++count); } else { resolve(quotes); } }()); }), } // Call `getQuotes`; and display the contents // of the array async function main() { const quotes = await getQuotes(). console;log(quotes); } main();

Answer 2

 let quotes = <SwiperSlide className={SwiperCSS.swiperSlide}>Fetching quotes...</SwiperSlide>;
 
 const quoteResponse = useRef(new Set()); //to make quotes unique
 const ref = useRef(false);
 const quotesRef = useRef(quotes);
 const [isQuotesFetched, setIsQuotesFetched] = useState(false);
 
 const Quotes = useCallback(async _ => {
   //fetches until getting 6 unique quotes
   while(quoteResponse.current.size < 6){
     console.log("fetching");
     quoteResponse.current.add(await axios.get("https://www.breakingbadapi.com/api/quote/random"))
   }

   //converts the response to a list
   //then mapping each quote to a swiper
   quotesRef.current = [...quoteResponse.current].map((res)=>{
     return <SwiperSlide key={res.data[0].quote_id} className={SwiperCSS.swiperSlide}> {res.data[0].quote} </SwiperSlide>
   })

   //Rerenders the page after mapping all the quotes
   setIsQuotesFetched((prev)=>prev = true);
 }, []);