react useEffect 里面的计数器，如何在达到指定数字后，停止下来？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

› React

This topic created in 2001 days ago, the information mentioned may be changed or developed.

这个是官方的一个例子，我改了一下，能够正常计数，从 100 开始倒数。
请问，如何在 count === 0 的时候，停止刷新 /计数？

import React, { useState, useEffect } from "react";

export default function Counter() {
  const [count, setCount] = useState(100);

  useEffect(() => {
    const id = setInterval(() => {
      setCount((c) => c - 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <h1>{count}</h1>;
}

refer to: https://react.docschina.org/docs/hooks-faq.html#what-do-hooks-mean-for-popular-apis-like-redux-connect-and-react-router

7 replies • 2021-01-06 15:00:50 +08:00

dxhuii

Nov 5, 2020

试试这样

```js
import React, { useState, useEffect } from "react";

export default function Counter() {
const [count, setCount] = useState(10);

useEffect(() => {
const id = setInterval(() => {
setCount((c) => c - 1);
}, 1000);
if (count === 0) {
clearInterval(id);
console.log("执行到了这里");
}

return () => clearInterval(id);
}, [count]);

return <h1>{count}</h1>;
}
```

syfless

Nov 5, 2020

把那行 setCount 换成这个就行
```js
```

syfless

Nov 5, 2020

把那行 setCount 换成这个就行
```js
setCount((c) => {
if (c > 5) {
return c - 1;
}
clearInterval(id);
return c;
});
```

yihouzenmeban

Nov 6, 2020

funnyecho

Nov 6, 2020

不用 setInterval，用 setTimeout + useEffect 就好

useEffect(() => {
if (count <= 0) return

const id = setTimeout(() => {
setCount((c) => c - 1);
}, 1000);

return () => clearInterval(id);
}, [count]);

yazoox

Nov 6, 2020

@funnyecho 这个可以工作

@dxhuii 这个可能工作

@syfless 这个也可能工作。不过，最后当 c <= 5 时，没有返回值，这时，count 好像被设置成了 undefined 。UI 上原来显示数字倒计时的，最后就消失了。

谢谢大家。

source

Jan 6, 2021

emmmm，难道不是在 setCount 这里加个判断就行了么？