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

V2EX = way to explore

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

现在注册

已注册用户请登录

› React

这是一个创建于 1484 天前的主题，其中的信息可能已经有所发展或是发生改变。

这个是官方的一个例子，我改了一下，能够正常计数，从 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 条回复 • 2021-01-06 15:00:50 +08:00

dxhuii

2020-11-05 22:55:10 +08:00

试试这样

```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

2020-11-05 23:07:05 +08:00

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

syfless

2020-11-05 23:07:30 +08:00

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

yihouzenmeban

2020-11-06 00:00:00 +08:00

funnyecho

2020-11-06 10:51:20 +08:00

不用 setInterval，用 setTimeout + useEffect 就好

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

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

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

yazoox

2020-11-06 16:19:43 +08:00

@funnyecho 这个可以工作

@dxhuii 这个可能工作

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

谢谢大家。

source

2021-01-06 15:00:50 +08:00

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