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

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

  •  
  •   yazoox · 2020-11-05 22:35:05 +08:00 · 2473 次点击
    这是一个创建于 1239 天前的主题,其中的信息可能已经有所发展或是发生改变。

    这个是官方的一个例子,我改了一下,能够正常计数,从 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
        1
    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
        2
    syfless  
       2020-11-05 23:07:05 +08:00
    把那行 setCount 换成这个就行
    ```js
    ```
    syfless
        3
    syfless  
       2020-11-05 23:07:30 +08:00
    把那行 setCount 换成这个就行
    ```js
    setCount((c) => {
    if (c > 5) {
    return c - 1;
    }
    clearInterval(id);
    return c;
    });
    ```
    yihouzenmeban
        4
    yihouzenmeban  
       2020-11-06 00:00:00 +08:00
    funnyecho
        5
    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
        6
    yazoox  
    OP
       2020-11-06 16:19:43 +08:00
    @funnyecho 这个可以工作

    @dxhuii 这个可能工作

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

    谢谢大家。
    source
        7
    source  
       2021-01-06 15:00:50 +08:00
    emmmm,难道不是在 setCount 这里加个判断就行了么?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3702 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 10:24 · PVG 18:24 · LAX 03:24 · JFK 06:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.