0
139
VistasNo se pudieron almacenar datos en estado en reaccionar js
Tengo dos datos en cardTypeData:
0: {id: 226, obj: {…}, Slug: 'hello-0' 1: {id: 228, obj: {…}, Slug: 'hello-1'} 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) => { newcard.push(res.data); }) .catch(console.log('err')) // .catch((error)=>{ // console.log(error) // }); } }); } console.log('list', newcard) setCardData(newcard); }, [cardTypeData]); la salida de la consola se muestra en la figura, cómo solucionar este problema. 
aquí se muestran los datos pero no pude mostrarlos en html.
3 Respuestas
Responde la pregunta0
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) returnserí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 : '' }` : `` }`0
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]);0
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.