Tengo un archivo JSON llamado teams.json que contiene la estructura básica ("nombre", "edad", "país", "función", "equipo" e "imagen") en un objeto. Estoy usando React para usar la función fetch() para recuperar los datos del archivo JSON local . Cuando llamo al enlace useEffect (que se muestra a continuación), los datos se recuperan del archivo JSON local y puedo llamar a una función useState para almacenar los datos en una variable de estado llamada data .

llamada a la función useEffect()

 //file path filePath = "/src/public/teams.json" const getData = (file) => { fetch(file) .then(res => res.json()) .then(data => setData(data)) .catch(err => console.log("Error fetching data", err) } useEffect(() => { getData(filePath) }, [filePath])

Si trato de editar o acceder a los datos dentro del enlace useEffect(), los datos se pueden recuperar sin ningún problema, como tal.

 .then(data => console.log(data[0]))

Esto devuelve un objeto json que contiene la información necesaria.

 { "name":"R", "image":"https://example.com", "team":"B", "role":"WB", "country":"American", "age":18 }

Sin embargo, en el cuerpo principal de mi aplicación de reacción, si trato de obtener datos del estado de los datos, aparece un error que dice Cannot read properties of undefined , que se muestra a continuación.

Cuerpo de la aplicación React

 return ( <main> {data[0].country} </main> )

Pero me sale este error:

He intentado soluciones a foros anteriores de:

Discusión de desbordamiento de pila Axios

Stack Overflow Discusión Error Axios

He movido mi proyecto a la estructura:

 -src --public *some files*

y coloque el archivo JSON en la carpeta pública. Lo lee ahora, pero aún no se renderiza. También he intentado usar axios pero fue en vano.

Si esto es una solución fácil, ¡lo siento! ¡Gracias por tu ayuda!