在此代码中,有两个按钮应启用和禁用 ProgressBar。 我在两个独立的函数中使用 setInterval 方法来启用 ProgressBar 和clearInterval 来禁用 ProgressBar。 第一个按钮可以工作,但第二个按钮(禁用按钮)不起作用 你知道我该如何解决它吗?
let [ProgresValue, setProgresValue] = useState(0);
var ID = null;
const StartProgress = () => {
ID = setInterval(() => {
if (ProgresValue <= 1) {
setProgresValue(ProgresValue = ProgresValue + 0.01)}
}, 100);}
const StopProgress = () => {
clearInterval(ID); }
这是返回部分:
return (
<Fragment>
<Text>Progress Bar:{parseFloat((ProgresValue * 100).toFixed(3))}%</Text>
{
(Platform.OS === 'android')
?
(<ProgressBarAndroid
styleAttr='Horizontal'
indeterminate={false}
progress={ProgresValue}
style={{ width: 300 }}
/>)
:
(<ProgressViewIOS
progress={ProgresValue}
/>) }
<TouchableHighlight onPress={StartProgress} style={styles.button}><Text style={{ color: 'white', textAlign: 'center' }}>Start Prgress</Text></TouchableHighlight>
<TouchableHighlight onPress={StopProgress} style={styles.button} ><Text style={{ color: 'white', textAlign: 'center' }} >Stop Progress</Text></TouchableHighlight>
</Fragment>
)
最佳答案
停止计时器后您不会更新状态,因此组件不会更新。您可能想使用 useEffect 钩子(Hook)进行清理。尝试这样的事情:
const [shouldCount, setShouldCount] = useState(false);
const [progressValue, setProgressValue] = useState(0);
useEffect(() => {
if(shouldCount){
const interval = setInterval(() => setProgressValue(progressValue + 1),
1000
);
return () => clearInterval(interval);
}
}, [shouldCount, progressValue]);
然后将 true/false 的 setShouldCount 计数传递给 onPress 事件。
编辑:我还忘记将值数组作为第二个参数传递给 useEffect,这样做是为了防止在值未更改的情况下运行副作用。
关于javascript - setInterval 不适用于 useState Hook ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59754519/