Question

我一直在尝试相对于用户的订阅状态（从推送管理器）维持页面重新加载时的按钮激活/停用状态。这个想法是当用户订阅时，在重新加载页面时，将禁用订阅按钮，并保持按钮处于禁用状态。但是到目前为止，我已经尝试过了，页面加载后，Toggle状态会不断地在true和false之间切换。这是我的代码。

   // True enables notification button, False disables the button
    const [toggle, setToggle] = useState(true);

    // Updates users subscription status
    const [subStatus, setSubStatus] = useState(false);


    useEffect(() => {
        // Fetch subscription status from local storage
        setSubStatus(JSON.parse(localStorage.getItem('sub-status')));
         if(subStatus !== 'true'){
           setToggle(true);
         }else{
            setToggle(false);
         }

        //store subscription status to local storage
        localStorage.setItem('sub-status', JSON.stringify(subStatus));
    });

处理点击的功能

function handleUserSubscription(e){
    e.preventDefault();
    navigator.serviceWorker.ready.then(subReg => {
        subReg.pushManager.getSubscription().then(sub => {
        if(!sub){ 
            Notification.requestPermission(response => {
                if(response === 'granted'){
                    subscribeUser();
                }else if(response === 'blocked'){
                    setSubStatus(false);
                    setToggle(false);
                }
            });
        }
        })
    })
}

// Register/Subscribe User to Push
function subscribeUser(){
    navigator.serviceWorker.getRegistration().then(reg => {
        reg.pushManager.subscribe({ 
            userVisibleOnly: true,
            applicationServerKey: urlB64ToUint8Array(
            'BCsA21O2LqhM36sqjcxSf08qk0KE5sz9GWUA_kK2o_ZIpuTc_LTzCu8zVg_2tAVvT988PP2it7ZodjdAinMM6A8'
            )
        })
        .then( sub => {         
            console.log('user has been subscribed!', JSON.stringify(sub));
            //updateServerWithSubscription(getSub)
            setSubStatus(true);
            setToggle(false); //disable notification once user is subscribed
            
        })
        .catch( err => {
                alert('Unable to subscribe User', err);
        })
    });
}

Answer 1

如果不传递依赖项数组，则useEffect将在每次重新渲染时运行，这将导致无限循环。如果只希望一次挂载调用此逻辑，则应该执行以下操作：

    useEffect(() => {
        // Fetch subscription status from local storage
        const status = JSON.parse(localStorage.getItem('sub-status'));
        
        setSubStatus(status);
        setToggle(Boolean(status !== 'true'));

        // (why do you need this?)
        // store subscription status to local storage
        // localStorage.setItem('sub-status', JSON.stringify(subStatus));
    }, []);

使用React钩子保持按钮的激活/停用状态

1 个答案: