Refactorizar, refactorizar y refactorizar de nuevo. Las soluciones anteriores funcionan en general como se esperaba, pero podrían escribirse mejor. Espero que no te importe si te muestro cómo debe verse.

 function loadNewCards() { if (!cardTypeData) return cardTypeData.forEach(async (cardItem) => { if (!cardItem.Slug) return const searchParams = new URLSearchParams(searchQuery).toString() const requestUrl = `chartconfig/${cardItem.Slug}/${searchParams}` const response = await axios.get(requestUrl).catch(console.log) if (!response) return setCardData(prevCardData => [...prevCardData, response.data]) }) } useEffect(() => { loadNewCards() }, [cardTypeData])

En primer lugar, evite anidar. Hace que su código sea menos legible. Trate de usar la negación para evitar la declaración if / else anidada.

 if (!cardItem.Slug) return

sería mejor que

 if (item.Slug) { const requestUrl = `chartconfig/${item.Slug}`

En segundo lugar, utilice URLSearchParams para crear los parámetros de consulta. Esta clase manejará su objeto que contiene el year y el month . Creo que es mejor tener

 const searchParams = new URLSearchParams(searchQuery).toString() const requestUrl = `chartconfig/${cardItem.Slug}/${searchParams}`

en vez de

 const requestUrl = `chartconfig/${item.Slug}/${ searchQuery?.year ? `?year=${searchQuery.year}${ searchQuery.month ? '&month=' + searchQuery.month : '' }` : `` }`

La solicitud de red es asíncrona. Antes newcard.push(res.data) , setCardData(newcard) ya se ejecutó con el valor inicializado de newcard que es [ ], ... puede modificar el código de forma similar a la siguiente para que funcione

 useEffect(() => { // let newcard = []; console.log("cardTypeData= ",cardTypeData) if (cardTypeData) { cardTypeData.map((item) => { if(item.Slug){ const requestUrl = `chartconfig/${item.Slug}/${ searchQuery?.year ? `?year=${searchQuery.year}${ searchQuery.month ? "&month=" + searchQuery.month : "" }` : `` }`; axiosRequest.get(requestUrl) .then((res) => { ***** modified 👇***** // newcard.push(res.data); setCardData(prev => [...prev, res.data]) }) .catch(console.log('err')) // .catch((error)=>{ // console.log(error) // }); } }); } console.log('list', newcard) // setCardData(newcard); }, [cardTypeData]);

He leído en alguna parte que console.log no siempre se ejecuta en el momento exacto en que lo llama, a veces espera un poco, especialmente cuando expande la entrada.

El problema podría deberse a las llamadas a la API de cardTypeData.map.

Intente usar for en su lugar para probarlo. También tendrá que extraer la parte asíncrona porque a React no le gusta el uso de efectos asíncronos.

Algo como esto:

 const loadNewCards = async () => { let newcard = []; console.log("cardTypeData= ", cardTypeData); if (cardTypeData) { for (let item of cardTypeData) { if (!item.Slug) { const requestUrl = `chartconfig/${item.Slug}/${ searchQuery?.year ? `?year=${searchQuery.year}${ searchQuery.month ? "&month=" + searchQuery.month : "" }` : `` }`; await axiosRequest .get(requestUrl) .then((res) => { newcard.push(res.data); }) .catch(console.log("err")); } } } console.log("list", newcard); setCardData(newcard); }; useEffect(() => { loadNewCards(); }, [cardTypeData]);

Y si le preocupa el rendimiento, debe usar Promise.all para ejecutar todas las llamadas en paralelo.