Así que he estado tratando de obtener estos datos de https://bad-api-assignment.reaktor.com/rps/history en mi back-end de node.js y mostrarlos en mi front-end de React.

De alguna manera puedo hacer que funcione y ver los datos en la consola, pero al actualizar la página principal, obtendré errores como este cuando intente manejar los datos nuevamente:

Aplicación.js:

 import axios from "axios"; import React from "react"; import GameData from "./GameData"; export default function App() { const [games, getGames] = React.useState(null); const baseURL = "http://localhost:5000"; React.useEffect(() => { getAllGames(); }, []); const getAllGames = async () => { await axios.get(baseURL) .then((response) => { const allGames = response.data.data; //console.log(allGames) getGames(allGames); }) .catch(error => console.error('Error: $(error')); } return( <GameData games={games}/> ) }

GameData.js:

 import React from 'react'; export default function GameData(props) { const displayGames = (props) => { const {games} = props; console.log(games) games.map((game, index) => { console.log(game, index); return( <div className='game' key={game.type}> </div> ) } ) } return( <> {displayGames(props)} </> ) }

En GameData.js, si comento esta sección:

 //games.map((game, index) => { // console.log(game, index); // return( // <div className='game' key={game.type}> // </div> // ) //} //)

Puedo ver ese console.log(games) en mi consola. Luego puedo descomentar esas líneas y guardar en React, y mostrará los datos asignados en la consola: Consola después de descomentar el código y guardar en React .

De acuerdo, perfecto, funciona hasta donde deseo, pero si actualizo la página en mi navegador, me enfrentaré al error/problema nulo Mensajes de error de la consola después de la actualización de la página .

He estado tratando de googlear eso pero no pude resolverlo. ¿Cómo resolver un problema como este? También debería poder ordenar esos datos más tarde y así sucesivamente.

Espero que tenga sentido.