Advertencia: No se puede actualizar un componente X mientras se renderiza un componente Y diferente. Para localizar la llamada incorrecta a setState() dentro de Y,
Tengo un componente Cart con react-redux y tengo un componente showProducts que obtiene los productos de una API (usando await-async) dentro de un useEffect, y luego uso useState para establecer algunos estados y use dispatch para actualizar el estado de redux también.
Sigo recibiendo esta advertencia:
Advertencia: No se puede actualizar un componente (`Cart`) mientras se renderiza un componente diferente (`ShowProducts`). Para ubicar la llamada a `setState()` incorrecta dentro de `ShowProducts`, sigue el rastro de la pila como se describe en https://reactjs.org/link/setstate-in-render
ShowProducts@http://localhost:3000/static/js/main.chunk.js:3099:73
Tengo una página Store y en mi página de la tienda tengo:
<Grid item xs container >
<ShowProducts />
</Grid>
<Grid item xs container direction="column">
<Cart />
</Grid>
y en mi componente showProducts:
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 componente cart, estoy utilizando el costo de envío que viene del componente showProducts. No estoy seguro de cómo solucionar esta advertencia, he estado buscando y aún no he encontrado una solución todavía. ¿Qué tan grave es esta advertencia y no estoy seguro de por qué la estoy recibiendo?
davy.ai
El mensaje de advertencia te indica que estás actualizando un componente (
Cart
) mientras renderizas un componente diferente (ShowProducts
), lo cual no está permitido en React. La advertencia es seria porque puede causar un comportamiento inesperado en tu aplicación.En tu componente
ShowProducts
, estás utilizandosetState
para establecer los estadosproducts
yshippingCost
, y también estás utilizandodispatch
para actualizar el estado de Redux. Estas acciones provocan una nueva renderización del componente, lo que a su vez puede desencadenar una nueva renderización del componente padre (Store
).Cuando el componente padre (
Store
) se renderiza nuevamente, intenta actualizar el componenteCart
, el cual está siendo renderizado actualmente porShowProducts
, de ahí la advertencia.Una forma de solucionar esto es mover la lógica de obtener los datos y actualizar el estado al componente padre (
Store
), y pasar los datos y el estado como props a los componentes hijos (ShowProducts
yCart
). De esta manera, el componenteCart
puede acceder al costo de envío sin provocar una nueva renderización deShowProducts
.Aquí tienes un ejemplo de implementación:
En esta implementación, el componente
Store
obtiene los datos, establece el estado y pasa las propsproducts
yshippingCost
a los componentes hijos. El componenteShowProducts
recibe la propproducts
y renderiza los productos. El componenteCart
recibe la propshippingCost
y la utiliza, sin provocar una nueva renderización del componenteShowProducts
.