一旦父状态改变，组件就不会更新

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() 被调用而增加。 然而，这似乎并没有增加倒计时组件的间隔，并且 NextSelection() 总是以相同的速度调用，而不是以改变状态 TimeInterval 的速度调用。 为什么倒计时组件没有随着 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;