React native useEffect 在同屏或返回屏幕时不起作用答案

【问题标题】：React native useEffect does not work when it's in same screen or back to screenReact native useEffect 在同屏或返回屏幕时不起作用
【发布时间】：2021-09-05 01:49:42
【问题描述】：

我正在为我的手机使用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, 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;

【问题讨论】：

标签： react-native function use-effect react-navigation-v5

【解决方案1】：

使用 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/

【讨论】：