Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

186
Visualizações
React.js useState function passed as a parameter doesn't rerender its component

So what I'm trying to do is to have a component that renders a list of games.

The component calls the function ApiMMO.getGamesFromTo() from a separate script passing the (response)=>{setGameList(response)} as a parameter. This separated scripts does a request and uses the function passed as parameter to change the component's state. The script does the job and the console logs confirm that the gameList changed but the component doesn't rerender.

The way I know the component didn't rerender is because the GameCard component prints its props when mounted.

So here's the code:

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>
    );
}

EDIT:

Here's the ApiMMO.getGamesFromTo() code:

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);
    });
}
about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

Can you change getGamesFromTo() so it doesn't need the callback and just returns the response?

Then in your useEffect you could just have:

React.useEffect(() => {
  const getGames = async () => await ApiMMO.getGamesFromTo(gamesPerPage, pageIndex)
  setGameList(getGames())
}, [setGameList, gamesPerPage, pageIndex])

-edit- Updated the answer to add an async function inside useEffect so my answer should now work.

about 4 years ago · Juan Pablo Isaza Relatório

0

You have to return some value on the map, or else remove the braces {}

Replace this:

return(
        <div>
            { gameList.length > 0 ? (
                gameList.map(item => {
                <GameCard game={item}/>
            })) : (
                <GameCard game={'no prop'}/>
            ) }
        </div>
    );

By this:

return(
    <div>
        { gameList.length > 0 ? (
            gameList.map(item => 
             <GameCard game={item}/>
        )) : (
            <GameCard game={'no prop'}/>
        ) }
    </div>
    );

Or this:

return(
        <div>
            { gameList.length > 0 ? (
                gameList.map(item => {
                 return <GameCard game={item}/>
            })) : (
                <GameCard game={'no prop'}/>
            ) }
        </div>
        );
about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda