React Native useState setInterval 函数无法正常工作

Question

我正在尝试使用 RN 的 setState 和 setInterval 显示从 10 开始的倒计时计时器，然后每秒减少到 0。

我的视图正在更新，但计时器无法正常工作。它进行得非常快，并且在 9 - 0 之间随机跳跃。我的代码中也没有显示任何错误。

import { StyleSheet, Text } from 'react-native'
import React, {useState} from 'react'


export default function Timer() {

  // Countdown timer logic upon click event

  const [time, setTime] = useState(10)
  
    setInterval(() => {
      setTime(time => time > 0 ? time - 1 : time = 10)
    },1000)
  

  return (
    <Text style={styles.timer}>{time}</Text>
  )
}

const styles = StyleSheet.create({
  timer: {
    fontWeight: '700',
    fontSize: 24,
    color: '#00C261',
    fontFamily: 'Roboto',
    width: 30,
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center'
  }
})

Answer 1

至于现在，您在 每次渲染 上调用间隔（通过记录间隔进行检查），在几次渲染后出现“渲染竞赛”，而不是尝试将专用挂钩中的逻辑，因此间隔只会调用一次。

另请注意表达式 time = 10 returns 10 所以您的代码会出错，您应该将状态视为不可变的。

export default function Timer() {
  const [time, setTime] = useState(10);

  useEffect(() => {
    const intervalID = setInterval(() => {
      setTime((time) => (time > 0 ? time - 1 : 10));
    }, 1000);

    return () => {
      clearInterval(intervalID);
    };
  }, []);

  return <Text style={styles.timer}>{time}</Text>;
}

React Native useState setInterval 函数无法正常工作

React Native useState setInterval function not working properly

javascript

setinterval

reactjs

react-native

use-state