usestate 挂钩与计时器在 useeffect 挂钩内无法正常工作答案

【问题标题】：usestate hooks combined with timers not working properly inside useeffect hookusestate 挂钩与计时器在 useeffect 挂钩内无法正常工作
【发布时间】：2021-06-16 07:16:59
【问题描述】：

这里我使用了 val

的 usestate 钩子

当 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 函数时，我的代码没有更新 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 秒内自动更新进度，并且在我导航到另一个主屏幕之后。

我想知道为什么我的第二个代码不像第一个代码那样工作？？

【问题讨论】：

标签： react-native react-hooks

【解决方案1】：

setvalue 是异步函数，因此在调用后不会立即设置此值。您尝试在导致问题的短时间内根据当前值更新值。如果状态还没有时间更新，您应该使用传递给 setvalue 的回调来纠正先前的值事件。

setvalue( prevValue => prevValue + 0.01 )

【讨论】：