状态更改正在重置导航

Question

我正在使用带有React Native应用程序的Firestore。我正在从App.js获取初始数据并实时听取更改。我的React导航代码也位于App.js上。我需要将数据从Firestore传递给两个组件，Details和Countdown。这些组件位于不同的导航堆栈中。当从Details更新Firestore时，App.js上会发生状态更新，迫使用户返回主屏幕。

我该如何防止这种情况发生？

App.js

export default function App() {
const [user, setUser] = useState();
const [countdownGames, setCountdownGames] = useState([]);
useEffect(() => {
const subscriber = auth().onAuthStateChanged((user) => {
if (user) {
setUser(user);
}
});
return subscriber;
}, []);
useEffect(() => {
const gameSubscription = firestore().collection("games").where("owner", "==", user.uid).onSnapshot(querySnapshot => {
let tempMedia = []
querySnapshot.docs.forEach(doc => {
tempMedia.push(doc.data());
});
// State change here is forcing user back to home page
setCountdownGames(tempMedia);
}, error => console.log(error));
return () => {
gameSubscription();
};
}, [user]);
const HomeStack = createStackNavigator();
function HomeStackScreen() {
return <HomeStack.Navigator>
<HomeStack.Screen name="Find" component={Search} />
<HomeStack.Screen name="Details" component={Details} initialParams={{ uid: user?.uid, games: countdownGames }} />
</HomeStack.Navigator>
}
const CountdownStack = createStackNavigator();
function CountdownStackScreen() {
return <CountdownStack.Navigator>
<CountdownStack.Screen name="Countdown" component={Countdown} initialParams={{ uid: user?.uid, games: countdownGames }} />
</CountdownStack.Navigator>
}
const Tab = createBottomTabNavigator();
function TabNavigation() {
return <Tab.Navigator>
<Tab.Screen name="Find" component={HomeStackScreen} />
<Tab.Screen name="Countdown" component={CountdownStackScreen} />
</Tab.Navigator>
}
const Stack = createStackNavigator();
return <NavigationContainer>
<StatusBar />
<Stack.Navigator>
<Stack.Screen name="Home" component={TabNavigation} />
</Stack.Navigator>
</NavigationContainer>
}

Answer 1

问题是在React组件中创建React组件。你永远不应该那样做。在文件的顶层定义所有组件。

代替：

export default function App() {
// Whatever
const HomeStack = createStackNavigator();
function HomeStackScreen() {
// Whatever
}
}

Do：

const HomeStack = createStackNavigator();
function HomeStackScreen() {
// Whatever
}
export default function App() {
// Whatever
}

更多信息https://reactnavigation.org/docs/troubleshooting/#screens-正在卸载导航期间的卸载