usestate 掛鈎與計時器在 useeffect 掛鈎內無法正常工作

Question

這里我使用了 usestate 鈎子作為val

當setinterval調用tick函數時，我的代碼正在通過一個額外的全局變量g正確更新val ！

import React, { useEffect, useState } from 'react';
import { TextInput } from 'react-native';
import { Button } from 'react-native';
import { ImageBackground } from 'react-native';
import { StyleSheet, View, FlatList, Alert, TouchableWithoutFeedback,TouchableOpacity, Keyboard,Text} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Slider from '@react-native-community/slider';
import * as Progress from 'react-native-progress';
export default function Status({route,navigation}) {
  let [val,setvalue]=useState(0);
  var g=0;
  useEffect(()=>{
    setTimeout(() => {
      navigation.navigate('Home',{xx:"hhh"});
    }, 5000);
   
  },[]);
  useEffect(() => {
    const x=setInterval(tick, 50);
     return ()=>{
            clearInterval(x);
     }
  },[])
  function tick()
  {
    console.log('hi');
    g=g+0.01;
    setvalue(g);
  }
  const {image,text}=route.params;
  return(
    <View style={styles.container}>
        <ImageBackground source={{uri:image}} imageStyle={styles.image} style={styles.border}>
          <Progress.Bar  progress={val} width={null} />
          <Text  style={styles.input}>{text}</Text>
        </ImageBackground>
    </View>
  );
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'red'
    },
    image: {
        flex:1,
        resizeMode: 'cover'
      },
      border: {
        flex:1,
        justifyContent:'flex-end'
      },
      input: {
        flex:1,
        height: 40,
        fontSize:20,
        padding:2,
        color:'white',
        //width:null,
        marginTop: 500,
        marginBottom:10,
        borderWidth: 0,
        borderColor:null,
        borderRadius:10,
        alignSelf:'center'
      }
});

但是當setinterval調用Tick function 時，我的代碼沒有更新val ？ 請幫忙！！

import React, { useEffect, useState } from 'react';
import { TextInput } from 'react-native';
import { Button } from 'react-native';
import { ImageBackground } from 'react-native';
import { StyleSheet, View, FlatList, Alert, TouchableWithoutFeedback,TouchableOpacity, Keyboard,Text} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Slider from '@react-native-community/slider';
import * as Progress from 'react-native-progress';
export default function Status({route,navigation}) {
  let [val,setvalue]=useState(0);
  
  useEffect(()=>{
    setTimeout(() => {
      navigation.navigate('Home',{xx:"hhh"});
    }, 5500);
   
  },[]);
  useEffect(() => {
    const x=setInterval(tick, 50);
     return ()=>{
            clearInterval(x);
     }
  },[])
  function tick()
  {
    console.log('hi');
    setvalue(val+0.01);
  }
  const {image,text}=route.params;
  return(
    <View style={styles.container}>
        <ImageBackground source={{uri:image}} imageStyle={styles.image} style={styles.border}>
          <Progress.Bar  progress={val} width={null} />
          <Text  style={styles.input}>{text}</Text>
        </ImageBackground>
    </View>
  );
}
const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: 'red'
    },
    image: {
        flex:1,
        resizeMode: 'cover'
      },
      border: {
        flex:1,
        justifyContent:'flex-end'
      },
      input: {
        flex:1,
        height: 40,
        fontSize:20,
        padding:2,
        color:'white',
        //width:null,
        marginTop: 500,
        marginBottom:10,
        borderWidth: 0,
        borderColor:null,
        borderRadius:10,
        alignSelf:'center'
      }
});

在這里，我使用了一個進度條，它應該在 5 秒內自動更新進度，並且在我導航到另一個主屏幕之后。

我想知道為什么我的第二個代碼不像第一個代碼那樣工作？

Answer 1

setvalue是異步的 function 並且由於該值在調用后不會立即設置。 您嘗試在導致問題的短時間內根據當前值更新值。 如果 state 還沒有時間更新，您應該使用傳遞給setvalue的回調來糾正先前的值事件。

setvalue( prevValue => prevValue + 0.01 )