Reactjs 当我触发onClick时，useState不会切换类

试图解决这个问题，但什么都没用。尝试在useState上执行onClick并切换类，但在执行此操作时会触发任何内容。有人能解释一下为什么它不工作吗？React似乎没有改变状态，而且我看不到按钮中应该出现的x，该按钮应该将useState设置为false。提前谢谢

import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import FilterMenu from "./selectButton";
import FetchRandomBet from "./fetchRandomBets";

function Betslip() {
    const data = [
        {
            value: 0,
            label: "No Filter"
        },
        {
            value: 1,
            label: "Less than two"
        },
        {
            value: 2,
            label: "More than two"
        },
    ]

    const [selectedValue, setSelectedValue] = useState(0);
    const [allStakes, setAllStakes] = useState(null);
    const [isActive, setActive] = useState(false);

    const handleChange = obj => {
        setSelectedValue(obj.value);
    }

    const betNow = () => {
        if (!allStakes) {
            const stakes = localStorage.getItem("stakes");
            const jsnStake = JSON.parse(stakes) || [];
            setAllStakes([jsnStake]);
            setActive(isActive);
            console.log('yes')
        } else if (allStakes) {
            localStorage.setItem("stakes", null);
            setAllStakes([])
            console.log('no')
        }
    }

    const closeBet = () => {
        setActive(false);
    }

    console.log(allStakes)

    return (
        <div className="betslip">
            <div className="betslip-top">
                <h1 className="text">BETSLIP</h1>
                <p className="text-two">BET WITH US!</p>
                <div>
                    <FilterMenu
                        optionsProp={data}
                        valueProp={selectedValue}
                        onChangeProp={handleChange}
                    />
                </div>
            </div>
            <div>
                <FetchRandomBet
                    valueProp={selectedValue}
                />
            </div>
            <Button
                onClick={betNow}
                className="betnow"
                variant="contained"
            >
                Bet Now!
                </Button>
            <div className={isActive ? "bet-show" : "bet-noshow"}>
                <button
                    onClick={closeBet}
                >
                    x
                </button>
                <h1>
                    {allStakes}
                </h1>
            </div>
        </div >
    );
}

export default Betslip;

import React，{useState}来自“React”；
从“@material ui/core/Button”导入按钮；
从“/selectButton”导入过滤器菜单；
从“/fetchRandomBets”导入FetchRandomBet；
函数Betslip（）{
常数数据=[
{
值：0，
标签：“无过滤器”
},
{
价值：1，
标签：“少于两个”
},
{
价值：2，
标签：“两个以上”
},
]
常量[selectedValue，setSelectedValue]=使用状态（0）；
常量[AllStacks，SetAllStacks]=useState（null）；
const[isActive，setActive]=useState（false）；
常量handleChange=obj=>{
设置选定值（目标值）；
}
常数betNow=（）=>{
如果（！所有股份）{
const stacks=localStorage.getItem（“stacks”）；
const jsnStake=JSON.parse（木桩）| |[]；
设置所有桩号（[jsnStake]）；
setActive（isActive）；
console.log（'yes'）
}否则，如果（所有股份）{
setItem（“木桩”，null）；
设置所有桩号（[]）
console.log（'no'）
}
}
const closeBet=（）=>{
setActive（假）；
}
console.log（所有桩）
返回(
贝特利普
与我们打赌
现在打赌！
x
{allstacks}
);
}
出口违约金；

默认情况下，您的活动设置为false，如果活动设置为true，您将显示css类

因此，在您的betNow（）中：

const betNow=（）=>{
如果（！所有股份）{
const stacks=localStorage.getItem（“stacks”）；
const jsnStake=JSON.parse（木桩）| |[]；
设置所有桩号（[jsnStake]）；
//变为真
setActive（真）；
console.log（'yes'）；
}否则，如果（所有股份）{
setItem（“木桩”，null）；
设定所有股份（[]）；
console.log（'no'）；
}
}

请创建一个，就像一个codesandboxin betNow，您应该执行setActive（true）；哦，对不起，伙计@BabarKhan，我没有看到你的评论