Soy nuevo en reaccionar y quiero cargar algunos datos de mi base de datos de ejemplo, pero cada vez que cargo la página de inicio, aparece este error. No sé por qué mi arrry debería estar indefinido. ¿Alguien tiene una respuesta para mí en este caso? Estoy luchando durante horas con eso. Estoy trabajando con la última versión de reaccionar. Eliminé la URL de mi base de datos porque es privada. al final puede ver el mensaje de error y la estructura de la base de datos

aquí está mi código:

 import { useState, useEffect } from "react"; import GoalList from "../components/goals/GoalList"; function AllGoalsPage() { const [isLoading, setIsLoading] = useState(true); const [loadedGoals, setLoadedGoals] = useState([]); useEffect(() => { setIsLoading(true); fetch( "my-database" ) .then((response) => { return response.json(); }) .then((data) => { const goals = []; for (const key in data) { const goal = { id: key, ...data[key], }; goals.push(goal); } setIsLoading(false); setLoadedGoals(goals); console.log(goals); }); }, []); if (isLoading) { return ( <section> <p>Loading...</p> </section> ); } return ( <section> <h1>All Goals</h1> <GoalList goalsList={loadedGoals} /> </section> ); } export default AllGoalsPage;