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

这个是官方的一个例子，我改了一下，能够正常计数，从 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

React useeffect count usestate

7 条回复 • 2021-01-06 15:00:50 +08:00

dxhuii

2020 年 11 月 5 日

试试这样

```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 月 5 日

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

syfless

2020 年 11 月 5 日

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

yihouzenmeban

2020 年 11 月 6 日

funnyecho

2020 年 11 月 6 日

不用 setInterval，用 setTimeout + useEffect 就好

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

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

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

yazoox

2020 年 11 月 6 日

@funnyecho 这个可以工作

@dxhuii 这个可能工作

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

谢谢大家。

source

2021 年 1 月 6 日

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

› React