使用notistack在页面之间导航时如何正确处理React中的snackbars？

Question

我正在开发一个 React 项目，使用 notistack 库来显示小吃栏。我有一个 ProfilePage 组件，在访问页面时根据特定数据显示两个小吃栏。但是，我还希望当用户离开页面时，小吃栏自动关闭。如果用户返回到个人资料页面，小吃栏应该会重新出现，不会出现任何问题。

目前，小吃店的行为出人意料：

当我离开个人资料页面时，小吃栏会关闭，但当我返回个人资料页面时，小吃栏会短暂重新出现并立即关闭，这不是所需的行为。

我怀疑问题在于 notistack 在页面之间导航时如何处理小吃栏以及 React 如何挂载/卸载组件。

我尝试了几种方法，包括：

1. 使用 useEffect 打开和关闭小吃栏，并使用清理逻辑在组件卸载时关闭小吃栏。
2. 使用 useRef 跟踪组件是否已安装，以防止零食栏不必要地重新打开。
3. 确保小吃栏仅在满足某些条件时打开（例如，检查 data.count15Days 或 data.countExpired）。

这是我的代码的简化版本：

个人资料页面组件：

export default function ProfilePage() {
  const { user } = useUserStore();
  if (!user) return;

  return (
    <div>
      <ProfilePageStatistics />
    </div>
  );
}

个人资料页面统计组件：

import { useEffect, useRef } from 'react';
import { useSnackbar } from 'notistack';

export default function ProfilePageStatistics() {
  const { data } = userGetStatistics(); // Fetching data
  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
  const isMounted = useRef(false);

  const messages = {
    expiring: 'Less than 15 days remaining',
    expired: 'Expired',
  };

  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }

    if (data?.count15Days) {
      enqueueSnackbar(messages['expiring'], {
        variant: 'certificateStatus',
        persist: true,
      });
    }

    return () => closeSnackbar();
  }, [data?.count15Days]);

  useEffect(() => {
    if (!isMounted.current) {
      isMounted.current = true;
      return;
    }

    if (data?.countExpired) {
      enqueueSnackbar(messages['expired'], {
        variant: 'certificateStatus',
        persist: true,
      });
    }

    return () => closeSnackbar();
  }, [data?.countExpired]);

  return <div>Profile Statistics Content</div>;
}

我想要实现什么

1. 当用户第一次访问个人资料页面时，应打开 Snackbars。
2. 当用户导航到另一个页面时，Snackbars 应自动关闭。
3. 如果用户导航回个人资料页面，小吃栏应重新打开并正常运行，而不会立即关闭。

Answer 1

兄弟 useEffect 在某些 props 或状态更改不好时更新组件的状态 仅当从网络获取数据时使用 useEffect 阅读此文档 https://react.dev/learn/you-might-not-need-an-effect