import { useEffect, useState } from "react"; function Popular() { const [popular, setPopular] = useState([]); useEffect(() => { getPopular(); }, []); const getPopular = async () => { const api = await fetch( `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_RECIPE_API_KEY}&number=9` ); const data = await api.json(); setPopular(data.recipes); }; return ( <div> {popular.map((recipe) => { return ( <div> <p>{recipe.title}</p> </div> ); })} </div> ); } export default Popular; Soy bastante nuevo en React y encontré este problema que he estado tratando de solucionar sin éxito. El código es un componente que devolverá una lista de títulos de recetas a mi aplicación. Estoy obteniendo datos de una API en la función getPopular() que está configurada en la variable de función setPopular del método useState() . Pero cuando guardo mi trabajo y vuelvo al navegador, los cambios no se muestran. La lista no se muestra, pero si hago console.log(data.recipes) se muestra en la consola.
Antes de ahora, si realicé algún cambio (tal vez un cambio de texto), la aplicación React lo muestra sin recargar, pero ahora tengo que recargar la página antes de ver el cambio.
Por favor, ¿cómo soluciono este problema? Para que pueda ver los cambios sin tener que recargar la página manualmente.
No digo que este sea el problema, pero ¿no se debe llamar a getPopular() después de su declaración? Con esto quiero decir:
const getPopular = async () => { const api = await fetch( /... }; useEffect(() => { getPopular(); }, []);Otra cosa que me molesta es que, aunque JS/React distingue entre mayúsculas y minúsculas, realmente creo que deberías evitar tener una const llamada popular, ya que tus funciones son Popular.
Por favor, hágame saber si el orden fue importante para su problema. Revisaré algunas clases de reacción pronto, si obtengo otra dentro, se lo haré saber.