React Native useEffect 在同一屏幕或返回屏幕时不起作用

Question

我正在为我的手机使用 react naviagtion 5 和打字稿。

我在数据库中有两组数据，一组是date，一组是time。两者都需要字符串。

我在用户选择日期时发出了一个 POST 请求，该时间将为用户选择。我为用户选择的时间何时结束制作了一个辅助函数，在这种情况下，我会在前端向他们展示一个显示

的警报

"Your selected time expired!"

显示该警报后。我强行清除了交货时间。我的逻辑工作正常。但我遇到的问题是，当我在同一屏幕或最小化应用程序时，useEffect 不会触发。如果我转到不同的屏幕并返回到那个交付屏幕，它就会触发。我不知道如何在选择时间过期时热重载应用程序，即使我在同一屏幕或最小化应用程序。

我在 Expo snack

中分享我的代码

这是我的示例代码

import * as React from 'react';
import {Text,View, Alert, Button} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useNavigation } from '@react-navigation/native';

const Stack = createStackNavigator();

    const deliveryDate = "2021-06-21";
    const deliveryTime = "10:00-10:03";

    const isTimeWindowExpired = (date: string, time: string) => {
        const [startTime] = time.split('-');
        const newDate = new Date(`${date}T${startTime}`);
    
        if (newDate.getTime() < new Date().getTime()) {
          return true;
        }
        return false;
      
    };
        
function Home() {
    const navigation = useNavigation()

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


function SecondHome() {
      const navigation = useNavigation()

   React.useEffect(() => {
    const isExpired = isTimeWindowExpired(deliveryDate, deliveryTime);
    const expirationTrigger = () => {
      Alert.alert("Time Expired");
   
    };
    if (isExpired) {
      expirationTrigger();
    }
  }, [deliveryDate, deliveryTime]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>useEffect does not trigger when it's in same screen or minimisse</Text>
         <Text>Home</Text>
         <Button
        title="Go back Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}



const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="home" detachInactiveScreens>
        <Stack.Screen name="home" component={Home} />
        <Stack.Screen name="details" component={SecondHome} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Answer 1

使用反应导航中的 useIsFocused 钩子可以帮助你。它基本上检查屏幕是否被查看。将它添加到 useEffect 及其依赖项中，useEffect 将在每次 isFocused 更改其值时触发。当您离开屏幕（到另一个屏幕或最小化应用程序）时，它是 false，当您回来时，它又是 true。

import { useIsFocused } from '@react-navigation/native';


function SecondHome() {
    const navigation = useNavigation()
    const isFocused = useIsFocused();

    React.useEffect(() => {
    if(isFocused) {
      const isExpired = isTimeWindowExpired(deliveryDate, deliveryTime);
      const expirationTrigger = () => Alert.alert("Time Expired");
      if (isExpired) {
        expirationTrigger();
      }
    }
  }, [deliveryDate, deliveryTime, isFocused]);

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>useEffect does not trigger when it's in same screen or minimisse</Text>
         <Text>Home</Text>
         <Button
        title="Go back Home"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

您可以在此处阅读更多相关信息 https://reactnavigation.org/docs/use-is-focused/

React Native useEffect 在同一屏幕或返回屏幕时不起作用

React native useEffect does not work when it's in same screen or back to screen

javascript

function

react-native

use-effect

react-navigation-v5