[英]What is the best way to call an api more than once at the start of a project and save them inside a component in React js
This code works fine however it doesn't add the quotes to the quotes component also i'm trying to find a better way for future projects
此代码工作正常,但它不会将引号添加到引号组件中,我也在尝试为未来的项目寻找更好的方法
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);
}
Regarding my comments here's how I might approach the problem.关于我的评论,这是我可能会如何解决这个问题。 You'll need to fetch a quote, and check that it's not already in the quotes array.
您需要获取报价,并检查它是否已经在报价数组中。 If it's in there make another API call otherwise add it to the array.
如果它在那里,请进行另一个 API 调用,否则将其添加到数组中。
When the array is full resolve the array, and add it to state.当阵列完全解析阵列,并将其添加到 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();
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);
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.