Intento generar una lista con productos, pero desafortunadamente la lista se actualiza demasiado tarde. La lista de productos está vacía. Cuando lo ejecuto por segunda vez funciona. ¿Hay alguna solución?
¡Muchos gracias!
export const Products = (props) => { const [products, setProducts] = useState([]); const [ListProducts, setListProducts] = useState([]); const [List, setList] = useState([]); const loadProducts = async (categorieid) => { const apiProducts = await axios.get(`${url}/products/${categorieid}`); setProducts(apiProducts.data.body); }; const mapData = async () => { if (products && products.length) { products.map((product) => ListProducts.push( <ProductCard product={product} key={product.id} /> ) ); setListProducts(ListProducts); } else { List.push( <div className="column"> <span className="title has-text-grey-light"> No products found! </span> </div> ); } const renderListProducts = () => { return <div className="container">{ListProducts}</div>; }; const writeCategory = async (kategorieId) => { await loadProducts(kategorieId); await mapData(); await renderListProducts(); }; }tu error esta aqui
const writeCategory = async (kategorieId) => { await loadProducts(kategorieId); await mapData(); await renderListProducts(); }; setProducts se llama al final de loadProducts , pero no es necesario actualizar el estado antes de que se llame a mapData . La solución es usar useEffect como disparador para la siguiente función.
const writeCategory = async (kategorieId) => { loadProducts(kategorieId); }; useEffect(() => { products.length && mapData(), [products.length] } y así sucesivamente para la tercera función renderListProducts
Por cierto en
products.map((product) => ListProducts.push( <ProductCard product={product} key={product.id} /> ) ) está modificando el estado de ListProducts fuera de setState , considere hacer algo como
const temp = products.map((product) => <ProductCard product={product} key={product.id} /> ) setListProducts(temp)en cambio