作為參數傳遞的 React.js useState 函數不會重新渲染其組件

Question

所以我想要做的是擁有一個呈現游戲列表的組件。

該組件從傳遞(response)=>{setGameList(response)}作為參數的單獨腳本調用函數ApiMMO.getGamesFromTo() 。 這個分離的腳本執行請求並使用作為參數傳遞的函數來更改組件的狀態。 腳本完成工作，控制台日志確認gameList更改，但組件未重新渲染。

我知道組件沒有重新渲染的方式是因為GameCard組件在安裝時打印了它的道具。

所以這是代碼：

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

編輯：

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

Answer 1

您可以更改getGamesFromTo()以便它不需要回調而只返回響應嗎？

然后在您的 useEffect 中，您可以擁有：

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

-edit- 更新了在 useEffect 中添加異步函數的答案，所以我的答案現在應該可以工作了。

Answer 2

您必須在地圖上返回一些值，否則刪除大括號{}

替換這個：

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

這樣：

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

或這個：

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