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

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

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

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

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

“您选择的时间已过期！”

显示该警报后。我强行清除交货时间。我的逻辑工作正常。但是我遇到的问题是，当我在同一屏幕中或最小化应用程序时，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,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;

解决方法

使用 react-navigation 中的 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/