我如何unMount一个运行函数？

Question

我在这里创建了一个堆栈结构。如您所见，我在Home.js中使用设置间隔函数制作了一个计时器。Setinterval函数在Home.js中工作，但当我转到Details页面时，它继续工作。当我切换到详细信息页面时，我如何使它停止呢？

Router.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from "./components/Home"
import Details from "./components/Details"
import Other from "./components/Other"
    
const Stack = createStackNavigator();

const Router= ()=> {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{gestureEnabled:true}} >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Details" component={Details} />
        <Stack.Screen name="Other" component={Other} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Router

Home.js

import React, {useState, useEffect} from 'react';
import {Text, View, Button,StatusBar} from 'react-native';

const Home = ({navigation}) => {
  const [timer, setTimer] = useState(1);


  useEffect(()=>{
    const myTimer=setInterval(()=>{
      setTimer(timer=>timer+1)
    },2000)

    return ()=>clearInterval(myTimer)
  })

  console.log("timer   :",timer)

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <StatusBar hidden/>
      <Text>Home</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default Home;

Details.js

import React,{useState,useEffect} from 'react';
import {Text,View,Button} from "react-native"

const Details = ({ navigation }) => {
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Other..."
          onPress={() => navigation.navigate('Other')}
        />
      </View>
    );
}

export default Details;

任何帮助都是非常感谢的。

Answer 1

使用React来保存计时器引用的示例。它可以在按钮的onPress回调处理程序中清除。我认为一个相关的问题是，useEffect钩子没有任何依赖项和回调更新状态，因此它会触发重发器(尽管清理函数应该处理这种情况)。无论哪种方式，通常在设置间隔计时器时，您只在组件挂载时设置一次，在计时器卸载时清除定时器。

import React, { useState, useEffect, useRef } from 'react';
import {Text, View, Button,StatusBar} from 'react-native';

const Home = ({ navigation }) => {
  const [timer, setTimer] = useState(1);
  const timerRef = useRef(null);

  useEffect(()=>{
    timerRef.current = setInterval(() => setTimer(timer => timer + 1), 2000)

    return () => clearInterval(timerRef.current)
  }, []); // <-- setup interval only once when component mounts

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <StatusBar hidden/>
      <Text>Home</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          navigation.navigate('Details');
          clearInterval(timerRef.current); // <-- clear interval on navigation
        }}
      />
    </View>
  );
};

Answer 2

const intervalRef = useRef();

useEffect(()=>{
  const myTimer=setInterval(()=>{
   setTimer(timer=>timer+1)
},2000);

intervalRef.current = myTimer;
return ()=>clearInterval(intervalRef.current);
})