Question

我正在尝试获取一个计时器，以便首先快速调用一个函数，然后再使其变慢。我的TimeInterval状态增加了，并作为道具传递给了我的倒计时组件

<Countdown
      isActive={RandominatorRunning}
      target={() => NextSelection()}
      timeToChange={TimeInterval}
  />

倒数组件

import React, { useEffect } from 'react';

const Countdown = ({ isActive, target, timeToChange }) => {


    useEffect(() => {
        let interval = null;
        if (isActive) {
            interval = setInterval(() => {
                target()
            }, timeToChange)
        } else if (!isActive) {
            clearInterval(interval)
        }
        return () => clearInterval(interval)
    }, [isActive])

    return null
}

export default Countdown;

我的TimeInterval状态正常运行，并且随着调用NextSelection（）的增加。但是，这似乎并未增加倒数组件的间隔，并且始终以相同的速度而不是以不断变化的状态TimeInterval速度调用NextSelection（）。为什么倒计时组件不会随着TimeInterval状态更新其速度？

Answer 1

不是肯定的，这是最好的解决方案，但是我能够更改倒数计时组件以获得预期的效果。

我将倒计时组件更改为在执行道具更新时变为非活动状态，然后在道具完成更新后立即恢复。

import React, { useEffect, useState } from 'react';

const Countdown = ({ isActive, target, timeToChange }) => {

    const [Active, setActive] = useState(isActive)

    const handleTimeExpire = async () => {
        await target()
        setActive(true)
    }

    useEffect(() => {
        let interval = null;
        if (Active) {
            interval = setInterval(() => {
                setActive(false)
                handleTimeExpire()
            }, timeToChange)
        } else if (!Active) {
            clearInterval(interval)
        }
        return () => clearInterval(interval)
    }, [Active])

    return null
}

export default Countdown;

父级状态更改后，组件不会更新

1 个答案: