Tengo un componente Cart con react-redux y tengo un componente showProducts que obtiene los productos de una API (usando await-async) dentro de useEffect, y luego uso useState para establecer algunos de los estados y uso dispatch para actualizar redux estado también. Sigo recibiendo esta advertencia:

 Warning: Cannot update a component (`Cart`) while rendering a different component (`ShowProducts`). To locate the bad setState() call inside `ShowProducts`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render ShowProducts@http://localhost:3000/static/js/main.chunk.js:3099:73

Tengo una página de tienda y en mi página de tienda tengo:

 <Grid item xs container > <ShowProducts /> </Grid> <Grid item xs container direction="column"> <Cart /> </Grid>

y en mis productos de espectáculo:

 useEffect(async () => { await getData(); }, []); . dispatch(setShippingCosts); dispatch(setCompanyNam); . . . async function getData() { fetch( `url` ) .then((res) => res.json()) .then((data) => { . . . setProducts(...); setShippingCost(...); . }) .catch((error) => { setError(error); }); }

y en mi carrito estoy usando el costo de envío que viene del componente mostrar productos. No estoy seguro de cómo solucionar esta advertencia, he estado buscando y aún no he encontrado una solución. qué tan seria es esta advertencia, y no estoy seguro de por qué la estoy recibiendo.

advertencia completa: