最初は関数をすばやく呼び出してから速度を落とすタイマーを取得しようとしています。増加する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状態とともにペースを更新しないのはなぜですか？
ポジティブではありませんが、これが最善の解決策ですが、カウントダウンコンポーネントを変更して、目的の効果を得ることができました。
カウントダウンコンポーネントを変更して、propの更新を実行している間は非アクティブになり、propの更新が完了するとすぐに再開します。
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;
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加