¿Alguien podría ayudarme a solucionar mi problema? ¡Soy un principiante en React.js y acabo de crear el componente para mostrar los resultados del carrito! pero por alguna razón, cae en un ciclo infinito.
Captura de pantalla del problema: http://prntscr.com/1w5hbey
puede ver los datos de la consola con la URL de este sitio. Gracias
https://side-cart-react.myshopify.com/products/test2
import React, { useState } from "react" import ReactDom from "react-dom" const LineItem = (props) => { return ( <div className="line-item" data-line=""> <div className="line-item__header"> <div className="line-item__title"> <p>{console.log(props.cart)}</p> </div> <p className="line-item__price"></p> </div> </div> ) } const CartDrawer = () => { const [cart, setCart] = useState(""); const getCart = () => { fetch("/cart.js", { method: 'GET', headers: new Headers({'content-type': 'application/json', 'X-Requested-With':'xmlhttprequest'}) }).then(res => { return res.json(); }).then(json => { setCart(json); console.log('state',cart); }); } getCart(); return <LineItem cart={cart} />; } const root = document.getElementById('cart__drawer_items'); ReactDom.render(<CartDrawer />, root);Cuando llama a setCart(json) , provoca una nueva representación de su componente. En este render posterior, su función getCart() es llamada nuevamente y, por lo tanto, se atrapa dentro de un bucle infinito. En su lugar, debe llamar a getCart() dentro de useEffect de esta manera:
const CartDrawer = () => { useEffect(() => { getCart(); }, []); return ...; } De esta forma, se llamará una sola vez. Si desea que el carrito se actualice cuando cambien algunos estados o accesorios, debe agregar esas variables en la matriz de dependencia useEffect .