React切换「显示全部」「显示获奖影片」功能失效代码逻辑求解释

核心概念前提 #

• filterWinner是React useState Hook返回的状态更新函数，它对应的布尔状态用来标记「当前是否处于仅展示获奖影片」的模式，初始默认值为false（即默认展示全部影片）
• 给状态更新函数传入回调的写法中，回调的入参prev是该状态的上一次最新值，不受组件闭包旧值影响，保证状态更新的准确性。

toggle逻辑说明 #

完整的切换逻辑代码如下：

const toggleWinner = () => {
    filterWinner(prev => {
        if(!prev) { 
            const winners = movies.filter((movie) => movie.winner === "True");
            setMovies(winners);
        }
        else {
            setMovies(movies);
        }
        return !prev
    });
};

返回!prev的作用 #

这里不存在修改prev的操作：prev是回调的入参，是只读的上一次状态值，return !prev是把新的状态值提交给状态更新函数，用来更新开关状态，作用是记录当前切换的档位，保证下一次点击可以切到相反的模式，具体执行流程如下：

1. 首次点击时prev为初始值false：
   • 走!prev为真的分支，过滤出获奖影片更新到展示列表
   • 返回!prev即true，开关状态被更新为true，标记当前为「仅展示获奖」模式
2. 第二次点击时prev为true：
   • 走else分支，把展示列表恢复为完整的影片列表
   • 返回!prev即false，开关状态被更新为false，标记当前为「展示全部」模式
3. 后续点击会重复上述流程，实现两种模式的循环切换效果。

如果省略return !prev这行代码，开关状态会永远停留在初始的false，每次点击只会走第一个分支，永远只能展示获奖影片，无法切回全量列表，切换功能就会失效。

内容的提问来源于stack exchange，提问作者George W.