时间戳

首页 > 解决方案 > 需要解释“React 切换“显示全部”和“显示获胜者”不起作用”

reactjs - 需要解释“React 切换“显示全部”和“显示获胜者”不起作用”

问题描述

我很难理解这篇文章中的这段代码。

具体来说：我观察到第一次单击按钮时，电影数组被过滤为仅显示获胜者，这意味着 if/else 语句的这一部分已被执行。但是为什么在 filterWinner 函数末尾的 return !prev 之前将 'prev' 更改为 '!prev' 呢？

if (!prev) {
        // winner = true
        console.log(prev);
        const winners = movies.filter((movie) => movie.winner === "True");
        setFilteredMovies(winners);
      }

有人可以向我解释这段代码吗？谢谢你。

帖子： React 切换“显示全部”和“显示获胜者”不起作用

完整的解决方案代码在这里

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

标签： reactjs

解决方案

filterWinner也许应该命名为setWinneror setWinnerFilter。

如果在设置这样的 React 状态时传递了一个函数，那么在函数末尾返回的就是新winner状态。由于我们返回!prev，我们反转任何布尔值winner。因此，它在和winner之间切换。truefalse

推荐阅读