Cómo actualizar la página después de obtener los datos en ReactJS.
Soy nuevo en ReactJS y ahora estoy intentando hacer una sección interactiva de comentarios (tomada de frontendmentor.io), pero el componente App simplemente no muestra lo que se supone que debe mostrar.
Este es mi componente App
:
function App() {
const [data, setData] = useState([]);
useEffect(() => {
const getComm = async () => {
await fetchData();
};
getComm();
}, []);
console.log(data);
const fetchData = async () => {
const res = await fetch("db.json").then(async function (response) {
const comm = await response.json();
setData(comm);
return comm;
});
};
return (
<fragment>
{data.length > 0 ? <comments data="{data}"></comments> : "No hay comentarios para mostrar"}
</fragment>
);
}
export default App;
El console.log(data)
se registra dos veces:
- la primera vez es un Array vacío;
- la segunda vez es el Array con mis datos dentro.
Como se muestra a continuación:
aquí
Si fuerzo al componente App
a imprimir los Comments
, solo dice que no puede iterar a través de una variable indefinida.
Este es mi componente Comments
:
function Comments({ data }) {
return (
<div>
{data.map((c) => (
<comment key="{c.id}"></comment>
))}
</div>
);
}
export default Comments;
Me pregunto por qué la página sigue mostrando “No hay comentarios para mostrar” incluso si el registro es correcto.
davy.ai
Parece que el problema podría estar relacionado con el momento en que se obtiene y establece el estado
data
. Cuando el componenteComments
intenta recorrer el arreglodata
, puede que aún no esté definido.Puedes intentar agregar verificaciones adicionales para asegurarte de que
data
no sea indefinido antes de intentar recorrerlo. Una posible solución podría ser modificar el componenteComments
de la siguiente manera:De esta manera, el componente solo intentará recorrer
data
si existe y tiene una longitud mayor a 0.Otra opción podría ser mover la lógica de obtención de datos al componente
Comments
en lugar del componenteApp
, de modo que la propiedaddata
siempre esté definida cuando se monte el componente.¡Espero que esto sea de ayuda!