es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • 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,

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,

31 Jul, 2023 Programación

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?

Advertencia completa:
enter image description here

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 utilizando setState para establecer los estados products y shippingCost, y también estás utilizando dispatch 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 componente Cart, el cual está siendo renderizado actualmente por ShowProducts, 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 y Cart). De esta manera, el componente Cart puede acceder al costo de envío sin provocar una nueva renderización de ShowProducts.

    Aquí tienes un ejemplo de implementación:

    // Componente Store
function Store() {
  const [products, setProducts] = useState([]);
  const [shippingCost, setShippingCost] = useState(0);

  useEffect(async () => {
    const data = await getData();
    setProducts(data.products);
    setShippingCost(data.shippingCost);
  }, []);

  return (
    <grid container="" spacing="{2}">
      <grid item="" xs="{6}">
        <showproducts products="{products}"></showproducts>
      </grid>
      <grid item="" xs="{6}">
        <cart shippingcost="{shippingCost}"></cart>
      </grid>
    </grid>
  );

  async function getData() {
    const res = await fetch(`url`);
    const data = await res.json();
    return {
      products: data.products,
      shippingCost: data.shippingCost,
    };
  }
}

// Componente ShowProducts
function ShowProducts({ products }) {
  return (
    <div>
      {products.map((product) => (
        <product key="{product.id}" product="{product}"></product>
      ))}
    </div>
  );
}

// Componente Cart
function Cart({ shippingCost }) {
  // utiliza shippingCost aquí
}

    En esta implementación, el componente Store obtiene los datos, establece el estado y pasa las props products y shippingCost a los componentes hijos. El componente ShowProducts recibe la prop products y renderiza los productos. El componente Cart recibe la prop shippingCost y la utiliza, sin provocar una nueva renderización del componente ShowProducts.

Comments are closed.