如何仅在特定组件页面关闭时触发localStorage弹出操作？

你的问题出在监听器被添加后，只要窗口关闭就会触发，没有做页面/组件的条件判断。以下是两种可行的修复方式：

方式一：通过路由路径判断目标页面 #

如果你的"最终组件页面"对应固定路由（比如/final-page），可以在事件处理函数里先判断当前路径，仅匹配时才执行操作，同时直接从localStorage取最新数据避免状态过期：

import { useEffect } from 'react';

// 假设最终页面路由为 /final-page
useEffect(() => {
  const handleBeforeUnload = (event) => {
    // 过滤非目标页面的情况
    if (window.location.pathname !== '/final-page') return;

    event.preventDefault();
    // 从localStorage获取最新数据，避免组件内状态过期
    const currentTables = JSON.parse(window.localStorage.getItem("tablesList")) || [];
    if (currentTables.length > 0) {
      currentTables.pop();
      window.localStorage.setItem("tablesList", JSON.stringify(currentTables));
    }
  };

  window.addEventListener("beforeunload", handleBeforeUnload);

  return () => {
    window.removeEventListener("beforeunload", handleBeforeUnload);
  };
}, []);

方式二：通过组件挂载状态判断 #

如果组件不是路由页面，或者需要更精准的组件活跃状态判断，可以用ref标记组件是否挂载，仅挂载时执行操作：

import { useEffect, useRef } from 'react';

const YourFinalComponent = () => {
  const isComponentMounted = useRef(false);

  useEffect(() => {
    isComponentMounted.current = true;

    const handleBeforeUnload = (event) => {
      // 组件已卸载时直接返回
      if (!isComponentMounted.current) return;

      event.preventDefault();
      const currentTables = JSON.parse(window.localStorage.getItem("tablesList")) || [];
      if (currentTables.length > 0) {
        currentTables.pop();
        window.localStorage.setItem("tablesList", JSON.stringify(currentTables));
      }
    };

    window.addEventListener("beforeunload", handleBeforeUnload);

    return () => {
      isComponentMounted.current = false;
      window.removeEventListener("beforeunload", handleBeforeUnload);
    };
  }, []);

  // 组件其他逻辑...
};

关键注意点 #

1. 不要直接用组件内的getReservedTable.getReservedTable，因为useEffect依赖为空数组，这个值可能是初始状态而非最新值，直接从localStorage取数据能保证操作的是最新内容。
2. 确保监听器在组件卸载时被移除（代码里的return清理函数已经做了这个操作），避免内存泄漏。

内容的提问来源于stack exchange，提问作者soheil noohi