V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
React
yazoox
V2EX  ›  React

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

  •  
  •   yazoox · 27 天前 · 901 次点击

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

    6 条回复    2020-11-06 16:19:43 +08:00
    dxhuii
        1
    dxhuii   27 天前
    试试这样

    ```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
        2
    syfless   27 天前
    把那行 setCount 换成这个就行
    ```js
    ```
    syfless
        3
    syfless   27 天前
    把那行 setCount 换成这个就行
    ```js
    setCount((c) => {
    if (c > 5) {
    return c - 1;
    }
    clearInterval(id);
    return c;
    });
    ```
    yihouzenmeban
        4
    yihouzenmeban   27 天前
    funnyecho
        5
    funnyecho   27 天前
    不用 setInterval,用 setTimeout + useEffect 就好

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

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

    return () => clearInterval(id);
    }, [count]);
    yazoox
        6
    yazoox   27 天前
    @funnyecho 这个可以工作

    @dxhuii 这个可能工作

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

    谢谢大家。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3821 人在线   最高记录 5298   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:28 · PVG 18:28 · LAX 02:28 · JFK 05:28
    ♥ Do have faith in what you're doing.