He escrito el siguiente código para pasar valores al cuadro de información, pero recibo un error TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo '0'). Por favor, indique dónde estoy equivocado.
import React,{useState} from 'react' function App() { const [specificState, setSpecificState] = useState({}); const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary'); const myData1 = await jsondata1.json(); const indData = myData1.Countries[77]; const getdata=()=>{ const temp =[]; temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed] temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths] temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] setSpecificState(temp); } useEffect(() => { getdata(); }, []) return ( <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } total={ specificState.Confirmed[1] } /> </div> ) } export default AppDebe realizar sus solicitudes de recuperación dentro de useEffect.
actualice su función de obtención de datos de esta manera;
const getdata=()=>{ const jsondata1 = await fetch('https://covid-19-fastest-update.p.rapidapi.com/summary'); const myData1 = await jsondata1.json(); const indData = myData1.Countries[77]; const temp =[]; temp ['Confirmed']= [indData.NewConfirmed, indData.TotalConfirmed] temp['Recovered'] = [indData.NewConfirmed, indData.NewConfirmed - indData.TotalDeaths] temp ['Deaths']= [indData.TotalDeaths, indData.NewDeaths] setSpecificState(temp); }elimine la búsqueda y otras operaciones del cuerpo del componente.
luego debe esperar a que se obtenga el estado, debe representar su componente condicionalmente.
return ( <div> {spesificState.Confirmed && <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } total={ specificState.Confirmed[1] } /> } </div> ) }tal vez algo como esto.
Cuando el estado se carga inicialmente, el estado specificState es un objeto vacío, por lo que no se encuentra ninguna propiedad Confirmed (indefinida)
Entonces, en el primer renderizado, esto arrojará esta excepción. Cuando useEffect se ejecuta y recupera resultados, esta propiedad se carga y luego puede usar su clase InfoBox .
Así que en su lugar usa
return ( {specificState.Confirmed ? <div> <InfoBox title="Coranavirus cases" cases={ specificState.Confirmed[0] } total={ specificState.Confirmed[1] } /> </div> : null } )Puede crear una declaración usando el operador if en useEffect hook, porque en este momento sus datos obtenidos aún no se cargan cuando intenta usar indData. Simplemente cubra su función getdata en useEffect así:
useEffect(() => { if (indData) { getdata(); } }, [indData])Además, debe agregar valores adicionales al pasar casos y atributos totales en el componente InfoBox, simplemente pase una matriz vacía usando | []