Estoy tratando de pasar datos JSON obtenidos y analizados que almacené en una variable de mi archivo App.js a un componente a través de accesorios (pero también ocurre el mismo error si solo quiero consolar. registrar los datos) en Chrome. Pero no puedo pasar o consolar. registrar los datos más de una vez sin recibir el mensaje de error: "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'título')".

Este es mi código en App.js:

 import './App.css'; import React, { useEffect, useState } from 'react'; import SpentTimeItem from './components/SpentTimeItem'; function App() { const [jsonData, setJsonData] = useState([{}]); const fetchData = () => { fetch('data.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json', }, }) .then((res) => res.json()) .then((data) => { setJsonData(data); }); }; useEffect(() => { fetchData(); }, []); // eslint-disable-line react-hooks/exhaustive-deps console.log('App.js jsonData[0].title', jsonData[0].title); console.log('App.js jsonData[1].title', jsonData[1].title); return ( <div className="App"> <header className="App-header"></header> {/*This is the buggy part. Calling it once with jsonData[0] works, but as soon as I do it a second time with jsonData[1], nothing works anymore.*/} {jsonData && <SpentTimeItem passedJsonData={jsonData[0]} />} {jsonData && <SpentTimeItem passedJsonData={jsonData[1]} />} </div> ); } export default App;

El mensaje de error (principal) de error en Chrome es: "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'título')". No sé por qué no funciona, mi única suposición es que tiene que ver con la representación de la página y que los datos de alguna manera desaparecen una vez que llamo a los datos JSON analizados almacenados por segunda vez.