React中将useState更新函数作为参数传递后组件未重渲染如何解决

根因定位 #

你遇到的现象本质是渲染层语法错误，而非状态更新未触发重渲染：监听gameList变化的useEffect已经成功打印更新后的值，证明setGameList已经生效且组件触发了重渲染，只是重渲染时没有输出有效元素。
错误出在map遍历的箭头函数写法：当箭头函数用大括号{}包裹逻辑体时，必须显式声明return才会返回值，你当前的写法gameList.map(item => { <GameCard game={item}/> })会返回全undefined的数组，所以看不到任何遍历生成的GameCard组件。

修复代码 #

两种修改方式任选其一即可，同时建议给列表项添加唯一key属性避免React警告：

方式1：使用箭头函数隐式返回（去掉大括号） #

function GameLibrary(){
    const [gameList, setGameList] = React.useState([]);
    const [gamesPerPage, setGamesPerPage] = React.useState(20);
    const [pageIndex, setPageIndex] = React.useState(1);

    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 key={item.id} game={item}/>
                )) : (
                <GameCard game={'no prop'}/>
            ) }
        </div>
    );
}

方式2：保留大括号，添加显式return #

gameList.map(item => {
  return <GameCard key={item.id} game={item}/>
})

内容的提问来源于stack exchange，提问作者Gustavo HK