Question

我正在尝试使用导航 5 清除状态，但它对我不起作用。在我的示例中，有 2 个屏幕：屏幕 A 和屏幕 B，当我第一次从屏幕 A 切换到屏幕 B 时，我看到了我想要的信息，但是当我回到屏幕 A 然后第二次切换到屏幕 B 时然后我看到了我之前看到的相同数据。每次回到屏幕 B 时我都必须重置状态，但它对我不起作用。

我在屏幕 A 和屏幕 B 中都执行了此功能。

useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
    });
    return unsubscribe;
  }, []);

Answer 1

您可以使用 useFocusEffect 钩子。 React Navigation 提供了一个钩子，当屏幕进入焦点时运行一个效果，并在它失去焦点时清理它。这对于添加事件侦听器、在屏幕聚焦时通过 API 调用获取数据或在屏幕进入视图后需要执行的任何其他操作等情况非常有用。

当我们在页面未聚焦时尝试停止某些操作时，这尤其方便，例如停止播放视频或音频文件，或停止跟踪用户的位置。

import { useFocusEffect } from '@react-navigation/native';

function Profile({ userId }) {
  const [user, setUser] = React.useState(null);

  useFocusEffect(
    React.useCallback(() => {
      const unsubscribe = API.subscribe(userId, user => setUser(data));

      return () => unsubscribe();
    }, [userId])
  );

  return <ProfileContent user={user} />;
}

参考link

本机反应：如何使用导航 5 清除状态？

1 个答案: