Entonces, lo que estoy tratando de hacer es tener un componente que muestre una lista de juegos.
El componente llama a la función ApiMMO.getGamesFromTo() desde un script separado pasando (response)=>{setGameList(response)} como parámetro. Estos scripts separados hacen una solicitud y usan la función pasada como parámetro para cambiar el estado del componente. La secuencia de comandos hace el trabajo y los registros de la consola confirman que la lista de gameList cambió pero el componente no se vuelve a procesar.
La forma en que sé que el componente no se volvió a renderizar es porque el componente GameCard imprime sus accesorios cuando está montado.
Así que aquí está el código:
function GameLibrary(){ const [gameList, setGameList] = React.useState([]); const [gamesPerPage, setGamesPerPage] = React.useState(20); const [pageIndex, setPageIndex] = React.useState(1); // setgameList(ApiMMO.getGamesFromTo( gamesPerPage, pageIndex)) React.useEffect(() => { ApiMMO.getGamesFromTo( gamesPerPage, pageIndex, ((response)=>{setGameList(response)})) }, []) React.useEffect(()=> { console.log('gameList changed: '); console.log(gameList); },[gameList]) return( <div> { gameList.length > 0 ? ( gameList.map(item => { <GameCard game={item}/> })) : ( <GameCard game={'no prop'}/> ) } </div> ); }EDITAR:
Aquí está el código ApiMMO.getGamesFromTo() :
function getGamesFromTo(numPerPage, page, callback){ let options = { method: 'GET', url: 'https://mmo-games.p.rapidapi.com/games', headers: { 'x-rapidapi-host': 'mmo-games.p.rapidapi.com', 'x-rapidapi-key': rapidapiUserKey } }; axios.request(options).then(function (response) { let from = (page - 1) * numPerPage; let to = page * numPerPage; let pageArray = response.data.slice(from, to) console.log("REQUEST RESULT: " + pageArray) callback(pageArray) return pageArray; }).catch(function (error) { console.error(error); }); }¿Puede cambiar getGamesFromTo() para que no necesite la devolución de llamada y solo devuelva la respuesta?
Luego, en su useEffect, podría tener:
React.useEffect(() => { const getGames = async () => await ApiMMO.getGamesFromTo(gamesPerPage, pageIndex) setGameList(getGames()) }, [setGameList, gamesPerPage, pageIndex])-editar- Actualicé la respuesta para agregar una función asíncrona dentro de useEffect, por lo que mi respuesta ahora debería funcionar.
Tienes que devolver algún valor en el mapa, o quitar las llaves {}
Reemplace esto:
return( <div> { gameList.length > 0 ? ( gameList.map(item => { <GameCard game={item}/> })) : ( <GameCard game={'no prop'}/> ) } </div> );Por esto:
return( <div> { gameList.length > 0 ? ( gameList.map(item => <GameCard game={item}/> )) : ( <GameCard game={'no prop'}/> ) } </div> );O esto:
return( <div> { gameList.length > 0 ? ( gameList.map(item => { return <GameCard game={item}/> })) : ( <GameCard game={'no prop'}/> ) } </div> );