如何使用 React Native 正确清除间隔

Question

在 RN 中，我有一个使用 setInterval 的倒数计时器，从 10 到 0。一旦满足时间 === 0 或小于 1 的条件，我希望间隔停止。 倒计时工作但不断重复，clearInterval 不起作用。 我究竟做错了什么？

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


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

  useEffect(() => {
    if(time > 0) {
      var intervalID = setInterval(() => {
        setTime(time => time > 0 ? time - 1 : time = 10)
      }, 1000)
    } else {
      clearInterval(intervalID)
    } 
    }, [])  


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

Answer 1

ClearInterval 应该在里面， setTime 因为 useEffect 只会触发一次。

注意：您还应该清除卸载。

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

  useEffect(() => {
    var intervalID = setInterval(() => {
      setTime((time) => {
        if (time > 0) {
          return time - 1;
        }
        clearInterval(intervalID);
        return time;
      });
    }, 1000);

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

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

Answer 2

该函数在 useEffect 上，仅在安装/卸载组件时执行，在执行该函数的那一刻，时间为 10，因此永远不会进入 else 条件。

此代码必须为您工作：

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


export default function Timer() {
  const [time, setTime] = useState(10)
  time <= 0 && clearInterval(intervalID)

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

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


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

Answer 3

您也可以使用它：

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

const Timer = () => {
  const [time, setTime] = useState(10)
  const promiseRef = useRef(null)

  useEffect(() => {
    if(time > 0) {
      promiseRef.current = setInterval(() => {
        setTime(time => time > 0 ? time - 1 : time = 10)
      }, 1000)
    } else {
      promiseRef.current = null
    } 
  }, [])

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

export default Timer

Answer 4

您的 useEffect 在依赖数组中没有任何值（时间），因此它只会在组件挂载时运行一次。

const [time, setTime] = useState(10);

useEffect(() => {
 if (time === 0) {
   return;
 }

 const timeoutId = setInterval(() => {
   setTime(time - 1);
 }, 1000);

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

您还可以使用超时，您不需要清除任何内容，因为每个 useEffect 触发器只会运行一次。

useEffect(() => {
 if (time === 0) {
   return;
 }

 setTimeout(() => {
   setTime(time - 1);
 }, 1000);
}, [time]);

如果您不想向依赖项数组添加time ，另一个可能有效的选项是清除 setTime 内的时间间隔

 useEffect(() => {
 const intervalID = setInterval(() => {
   setTime((time) => {
     if (time === 0) {
       clearInterval(intervalID);

       return time;
     }

     return time - 1;
   });
 }, 1000);
 return () => {
   clearInterval(intervalID);
 };
}, []);

请注意，在您的示例中，您倒数到 1 并返回到 10，因此它永远不会达到 0

setTime(time => time > 0 ? time - 1 : time = 10)

如果您希望它在完成计数后重置回 10，最后一个选项可能对您有用，因为它不会触发每次更改的效果，只需要在清除间隔后返回10而不是time这是一个示例https://jsfiddle.net/dnyrm68t/