Question

我正在尝试添加计时器，问题陈述-用户单击按钮时，应调用计时器启动，并在3秒钟后应执行某些操作。

我的代码不起作用

const [timer, setTimer] = useState(3);

useEffect(() => {
    if (timer > 0) {
      setTimeout(() => setTimer(timer - 1), 1000);
    } else {
      window.close();
    }
  }, [timer]);

function submitStartTimer(){                /*Button onClick=submitStartTimer()*/
    setTimer(3);
    swal({
      title: "Thank You!",
      text:
        "You have successfully Submitted your Data! This tab is going to close!",
      icon: "success",
      button: false,
    });
}

但是我知道是由于useEffect导致的，该选项卡在3秒后自动关闭，但是如何在单击SubmitStartTimer（）之后如何启动useEffect？

Answer 1

const [timer, setTimer] = useState(0);

您只需要从0开始计时。由于您从3开始计时，因此useEffects会从一开始就立即减少计时器的时间：

if (timer > 0) {
  setTimeout(() => setTimer(timer - 1), 1000);
}

由于[timer]已作为依赖项传递，因此只要此更改发生，就会调用useEffects，因此您会看到该行为。您已经使用过：

setTimer(3)在您的Submit方法中，这样您就可以使用了，const [timer, setTimer] = useState(0);

另一种解决方案是从[timer]中的依赖项中删除useEffects并将其保留为[]。

Answer 2

我得到了解决方案，使用Rahul的答案进行了一些修改，可以帮助我解决问题。

const [timer, setTimer] = useState(-1);

  useEffect(() => {
    if (timer > 0) {
      setTimeout(() => setTimer(timer - 1), 1000);
    } else if (timer === 0) {
      window.close();
    }
  }, [timer]);

function submitStartTimer(){
  setTimer(3);
    swal({
      title: "Thank You!",
      text:
        "You have successfully Submitted your Data! This tab is going to close!",
      icon: "success",
      button: false,
    });
}

如何在ReactJS挂钩中添加计时器

2 个答案: