为什么我的状态在屏幕变化时持续存在？

Question

我正在开发一个 React Native 应用程序，我目前正在我的应用程序的 2 个不同位置使用一个组件。我使用抽屉导航器（React Navigation v6）从一个地方导航到另一个地方。该组件在收到来自 API 的响应时更新状态。但是，如果我切换到呈现此组件的其他位置，状态仍然存在（因此来自 API 的视觉消息出现在其中）。

为什么会这样？当组件再次安装时，所有状态不应该在卸载时重置并获得初始值（传递给 useState() 的值）吗？这不是我想要的行为，据我所知，这不应该发生。

如何使我的状态在屏幕切换时不持久？我已经实现了下面的代码，以便在选择菜单屏幕时执行，但对这个问题没有影响：

navigation.dispatch(
        CommonActions.reset({
            index: 0,
            key: null,
            routes: [{ name: targetScreen }]
        })

Answer 1

react-native 中的这种行为不同于 React。这已记录在案 here。

If you are coming to react-navigation from a web background, you may assume that when user navigates from route A to route B, A will unmount (its componentWillUnmount is called) and A will mount again when user comes back to it. While these React lifecycle methods are still valid and are used in react-navigation, their usage differs from the web.

考虑一个屏幕 A 和一个屏幕 B。假设我们从 A to B.

导航

When going back from B to A, componentWillUnmount of B is called, but componentDidMount of A is not because A remained mounted the whole time.

这对react-native-导航中的所有导航器都有效。因此，如果我们有一个带有 5 个选项卡的选项卡栏导航，并且每个选项卡嵌套一个 Stack，那么我们可以在一个堆栈上导航到一定深度，然后切换选项卡，然后再次切换回选项卡，并且所有访问过的屏幕都将保持挂载状态。

编辑： 回复评论。解决您问题的推荐标准模式如下。

// some state in my component
const [state, setState] = useState()

useFocusEffect(
    React.useCallback(() => {
      // set state to initial value
      setState()
    }, [])
);

这是描述here。

Answer 2

当您导航出组件时，您的组件不会卸载。考虑在此挂钩中手动重置您的状态 useFocusEffect

为什么我的状态在屏幕变化时持续存在？

Why does my state persist on screen change?

react-native

react-navigation

use-state