Javascript 使用挂钩设置状态后运行函数

我试图在API调用后用钩子更新状态后运行一个倒计时函数，但是我遇到了一个困难，因为状态还没有更新。将

useffect

与

setInterval

一起使用也不起作用，因为它会创建许多set interval实例，从而阻止一切

 async function fetchData() {
    const res = await fetch(API);
    res.json()
        .then(res => {
            setTime(res);

        })
        .catch(err => console.log(err))  

}

const setTime = (data) => {
    const obj = Time(data);
    setDays(obj.day)
    setHours(obj.hour)
    setMinutes(obj.minute);
    setSeconds(obj.second);


 useEffect(() => {
    fetchData();
}, []); 

useEffect(() => {
    runClock();
}, [seconds]) //I understand why it happens since it will run useEffect every time seconds changes

function runClock() {
    let intervalId = setInterval(() => {
        console.log(seconds+ "seconds")
       if(seconds > 0){
            setSeconds(prevSeconds => prevSeconds -1);
       }
// more logic...
}

---

我不确定我想做的是可能的，还是我只是需要另一种方法？作为参考，我正在制作一个倒计时计时器。

您可以使用setInterval并将

runClock（）

函数中的所有逻辑设置为useffect，该函数依赖于秒。然后将间隔id收集到一个变量中，然后实现一个清除函数来消除超时。因此，下次运行效果时，它将设置一个新效果。这样您就不会遇到太多的setInterval实例

为此，应该从效果中返回一个清除间隔的函数

useEffect(() => {
     let intervalId = setInterval(() => {
        console.log(seconds+ "seconds")
       if(seconds > 0){
            setSeconds(prevSeconds => prevSeconds -1);
       }
// more logic...
      }
    return clearInterval(intervalId)
}, [seconds]) 

---

更多关于

也许你可以创建一个不同的

useffect（）

，在依赖关系数组中有等待的变量或更改状态。哇，我真不敢相信这真的有效。我没有使用数组，也没有制作另一个

useffect（）

，但想法是一样的。我只是做了一个“虚拟”钩子，在获取API并使其依赖于相同的

useffect（）。谢谢它不起作用。现在每秒减少20。