如何卸载运行函数？

Question

我这里创建了一个栈结构。如您所见，我在 Home.js 中制作了一个带有 Setinterval 函数的计时器。 Setinterval 函数在 Home.js 中有效，但当我转到“详细信息”页面时它会继续有效。怎么让它在切换到详情页时停止？

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

const intervalRef = useRef();

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

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

Answer 2

使用 React ref 保存计时器 ref 的示例。它可以在按钮的 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>
  );
};

如何卸载运行函数？

How do I unMount a running function?

reactjs

react-native

react-functional-component

如何卸载 运行 函数？

How do I unMount a running function?

reactjs

react-native

react-functional-component

如何卸载运行函数？