在上一个堆栈屏幕上触发 useEffect React Native

Question

我有一个 react native 项目，它显示了一个由两个选项卡组成的 UserNavigator 页面，一个显示活动数据，第二个显示非活动数据，所有数据都可以单击导航到 UserDetails 页面

问题是当我尝试将非活动数据更新为活动数据然后 go 回到上一个屏幕 UserNavigator 时，UserNavigator 上的数据将不会更新，因为 useEffect 未被触发以获取更新的数据

名为 UserNavigator 的选项卡导航页面

export default function DataList() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Active" component={ActiveData} />
      <Tab.Screen name="Inactive" component={InactiveData} />
    </Tab.Navigator>
  )
}

活动和非活动页面上的 useEffect

React.useEffect(() => {
        (async () => {
            setLoading(true);
            try {
              await getUserData();
            } catch (err) {
              Alert.alert("", err?.response?.data?.message || err?.message);
            }
            setLoading(false);
          })();
      }, []);

function 在 UserDetails 上将用户状态设置为活动，然后 go 返回列表

const onSetActive = async () => {
        setModalVisible(!modalVisible)
        setLoading(true)
        try {
            const body = {
              _id: item._id,  
              status: "Active",
            }
            const response = await axiosInstance.patch(`/UserData/update`, body)
            await getUserData()
            Alert.alert(
                "Success",
                "User has been set to active!",
                [
                  {
                    text: "OK",
                    onPress: () => navigation.navigate("UserNavigator") 
                  }
                ]
              );
        }
        catch (err) {
            Alert.alert("", err?.response?.data?.message || err?.message);
        }
        setLoading(false)
      }

我一直在尝试在活动和非活动选项卡上使用 useIsFocused

Top Import
import { useIsFocused } from "@react-navigation/native";

const isFocused = useIsFocused();
React.useEffect(() => {
        (async () => {
            setLoading(true);
            try {
              await getUserData();
            } catch (err) {
              Alert.alert("", err?.response?.data?.message || err?.message);
            }
            setLoading(false);
          })();
      }, [isFocused]);

但是，当我尝试在选项卡之间导航时，即使数据没有任何更改，它也会重新呈现数据，并且需要更多时间来导航并等待获取数据

Navigation.replace 不会做，因为我从主页导航到 UserNavigator 页面如果我这样做，当我从 UserDetails 按下后退按钮时，它将 go 返回到主页而不是 UserNavigator

我的问题有其他解决方案吗？ 我一直在考虑在更新数据以触发 useEffect 后导航到 UserNavigator 时传递道具，但我不知道如何

Answer 1

您可以使用 reducer 引擎来实现它，您可以在应用程序的任何页面上更改变量并使用useEffect在任何页面中订阅它，如下例所示：

import React, {useEffect} from 'react';
import store from '../store';

const Page = () => {
   const {isFocused} = store.getState().updateReducer;

   useEffect(() => {
      (async () => {
            setLoading(true);
            try {
              await getUserData();
            } catch (err) {
              Alert.alert("", err?.response?.data?.message || err?.message);
            }
            setLoading(false);
          })();
   }, [isFocused]);
   return (<View></View>

}

export default Page;