Así que soy súper nuevo para reaccionar. Tengo un código donde uso buscar para obtener datos de una API (que creé, estructurada como {'userData': {'overall': {'rank': '10', 'level': '99', 'xp ': '200000000'}}}) y lo muestro en pantalla. Estuvo funcionando bien durante horas y ahora, de repente, sin tocar ningún código, está roto. mostrará los datos bien si hago una solicitud de API y luego actualizo la página. pero luego, cuando actualizo la página nuevamente, me dice "Error de tipo no detectado: no se pueden leer las propiedades de undefined (leyendo 'general')" No sé qué estoy haciendo mal y me pregunto si alguien puede ayudarme porque yo no sé cómo se volvió indefinido, lo estaba leyendo bien y luego, al actualizar, cambia a indefinido. aquí está mi código para el componente
function Activities() { let name = "three-dawg"; function fetchPlayerData(name){ fetch(URL) .then(response => response.json()) .then(data => setPlayerData(data)); }; function refreshPage() { window.location.reload(false) } const [playerData, setPlayerData] = useState([]); useEffect(() => {fetchPlayerData(name)}, [name]); return ( <div> Hello {playerData._id} <button onClick={() => { fetchPlayerData(name) refreshPage() }}>load player</button> <ul> <li>{playerData.userData.overall.rank}</li> </ul> </div> ); }const [playerData, setPlayerData] = useState([]); Su estado inicial es una matriz vacía, por lo que ese es el valor que tendrá en su primer renderizado. Las matrices no tienen una propiedad userData , por lo que obtiene una excepción cuando intenta acceder a playerData.userData.overall .
Debe hacer que sus datos iniciales se vean como sus datos reales, de modo que playerData.userData.overall.rank sea válido o, más probablemente, necesita agregar código para verificar si aún tiene los datos iniciales y generar algo diferente mientras esperando a que se complete la carga. null o undefined sería más fácil de verificar, por lo que es posible que desee utilizar uno de ellos como estado inicial.
const [playerData, setPlayerData] = useState(null); useEffect(() => {fetchPlayerData(name)}, [name]); if (!playerData) { return <div>Loading...</div> } return ( <div> // ...the rest of your code </div> )Probablemente también desee eliminar el código que vuelve a cargar la página.
Ok, hay una solución fácil para este problema. Solo agrega "?" después de todos los datos que está obteniendo.
return ( <div> Hello {playerData?._id} <button onClick={() => { fetchPlayerData(name) refreshPage() }}>load player</button> <ul> <li>{playerData?.userData.overall.rank}</li> </ul> </div> );La obtención de datos es asíncrona, por lo que, cuando representa la pantalla, muestra el estado inicial al principio, que es una matriz vacía. Se necesita tiempo para obtener los datos. Entonces, al agregar un signo de interrogación, el renderizador verifica si los datos están presentes y solo luego procesa su componente.