当我单击退出按钮时，计时器停止。怎么做？答案

【问题标题】：When I click on the exit button so that the timer stops. How to do that?当我单击退出按钮时，计时器停止。怎么做？
【发布时间】：2022-12-31 22:24:57
【问题描述】：

LabPart.jsx- 在这里，我想要，当我点击退出按钮时，它会将我重定向到登录页面，然后计时器会停在那里，当我从登录页面登录时，计时器将从它停止的地方开始.我该怎么做。在这里，我调用了 clearInterval() 来停止计时器，但它不起作用。而且登陆后连运行都运行不了。请帮我。

LabPart.jsx-

import React, {useState, useEffect} from 'react';
import Login from './Login';

const LabPart = ({Time , password}) => {

  const [pass, setPass] = useState(password);
  const [timeRemaining, setTimeRemaining] = useState(Time);
  let stop = timeRemaining;
  let interval = null;

  
  useEffect(() => {
    interval = setInterval(() => {
      setTimeRemaining((time) => time - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  const handleExitClick = () => {
    console.log("logout successful");
    clearInterval(interval);
    setPass("");
  };

  // console.log(timeRemaining);

  const hours = Math.floor(timeRemaining / 3600);
  const minutes = Math.floor((timeRemaining % 3600) / 60);
  const seconds = timeRemaining % 60;

  return (
    <>
    {pass && timeRemaining>=0 ?
      (<div>
         <p>Time remaining: {hours}h {minutes}m {seconds}s</p>
         <button onClick={handleExitClick}>Exit</button>
      </div>)
     : (<Login newTimeRemaining={stop} truee={true}/>)
    } 
    </>
  )
}

export default LabPart;

import React, { useState, useEffect } from "react";
import LabPart from "./LabPart";
import '../style/login.css';

const Login = ({newTimeRemaining,truee} ) => {
  const [password, setPassword] = useState("");
  const [timeRemaining, setTimeRemaining] = useState(10);
  const [openPage, setOpenPage] = useState(false);
  // const [netTime, setNewtime] = useState(timeRemaining1);


  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleFormSubmit = (event) => {
    event.preventDefault();
    // setNewtime(timeRemaining1);
    // if(newTimeRemaining<0)
    // {
    //     setTimeRemaining(newTimeRemaining)
    // }
    if (password === "12345" ) {
      console.log("login successful");
      setOpenPage(true);
    }
    else {
      alert("Incorrect Password")
    }
  };

  return (
    <>
    {openPage ?  <LabPart Time={10} password={password} />
      :
    <form onSubmit={handleFormSubmit}>
        <input
          type="password"
          value={password}
          onChange={handlePasswordChange}
        />
        <button type="submit">Enter</button>
        {
          x ? newTimeRemaining : timeRemaining
        }
      </form> 
    }
      
    </>
  );
};

export default Login;

【问题讨论】：

将timeRemaining的值保存到localStorage，登录成功后再次获取if。

标签： javascript reactjs

【解决方案1】：

你应该明白 React 是非常不同的（不同于 vue 和 angular）构造函数在需要更新时总是回调而没有任何缓存 create interval as a state

  const [interval, setCInterval] = useState(null) //let interval = null;

  
  useEffect(() => {
    setCInterval(
      setInterval(() => {
        setTimeRemaining((time) => time - 1);
      }, 1000)
    )
    return () => clearInterval(interval);
  }, []);

【讨论】：