map创建的组件绑定beforeunload事件仅单个生效的修复方案

问题根源 #

1. 事件覆盖：如果每个Child组件通过window.onbeforeunload = 回调绑定事件，后面的组件会覆盖前面的绑定，最终只有最后一个组件的回调能执行。
2. 请求被终止：浏览器关闭/刷新时，普通异步请求（如未配置特殊参数的fetch/axios）会被浏览器主动终止，导致请求无法到达后端。

具体修复步骤 #

方案一：父组件统一管理，批量发送请求（推荐） #

将所有需要提交的item状态统一存在父组件，在父组件绑定beforeunload事件，触发时批量提交数据，避免多组件绑定冲突：

1. 父组件实现状态管理与事件绑定：

import { useState, useEffect } from 'react';

function ParentComponent({ items }) {
  const [itemStatuses, setItemStatuses] = useState({});

  // 接收Child组件传递的状态更新
  const updateItemStatus = (itemId, status) => {
    setItemStatuses(prev => ({ ...prev, [itemId]: status }));
  };

  useEffect(() => {
    const handleBeforeUnload = () => {
      // 收集需要提交的有效数据
      const submitData = Object.entries(itemStatuses)
        .filter(([, status]) => status !== null)
        .map(([id, status]) => ({
          id: Number(id),
          status
        }));

      // 使用sendBeacon确保页面卸载时请求完成
      if (submitData.length > 0) {
        navigator.sendBeacon(
          '/api/your-endpoint',
          JSON.stringify(submitData),
          { type: 'application/json' }
        );
      }
    };

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

  return (
    <div>
      {items.map(item => (
        <ChildComponent
          key={item.id}
          item={item}
          updateStatus={updateItemStatus}
        />
      ))}
    </div>
  );
}

2. Child组件仅负责更新父组件状态：

function ChildComponent({ item, updateStatus }) {
  // 示例：根据业务逻辑更新状态，比如组件内状态变化时
  useEffect(() => {
    updateStatus(item.id, 'your-target-status');
    
    // 组件卸载时清理无效状态（可选）
    return () => {
      updateStatus(item.id, null);
    };
  }, [item.id, updateStatus]);

  return <div>{item.name}</div>;
}

方案二：Child组件独立绑定事件（需避免覆盖+保证请求完成） #

如果必须在Child组件中处理，需使用addEventListener绑定事件，并在组件卸载时移除，同时用sendBeacon或带keepalive的fetch确保请求不被终止：

function ChildComponent({ item }) {
  useEffect(() => {
    const handleBeforeUnload = () => {
      // 使用sendBeacon发送请求，浏览器会保证请求完成
      const data = new FormData();
      data.append('id', item.id);
      data.append('status', 'your-target-status');
      navigator.sendBeacon('/api/your-endpoint', data);

      // 也可使用带keepalive的fetch替代：
      // fetch('/api/your-endpoint', {
      //   method: 'POST',
      //   body: JSON.stringify({ id: item.id, status: 'your-target-status' }),
      //   headers: { 'Content-Type': 'application/json' },
      //   keepalive: true
      // });
    };

    window.addEventListener('beforeunload', handleBeforeUnload);
    // 组件卸载时移除监听，防止内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [item.id]);

  return <div>{item.name}</div>;
}

关键注意事项 #

• 优先用navigator.sendBeacon()：这是W3C专为页面卸载场景设计的API，兼容性好，无需担心请求被浏览器终止。
• 禁止用window.onbeforeunload赋值：这种方式是覆盖式绑定，多组件绑定后只会保留最后一个的回调。
• 必须清理事件监听：组件卸载时移除对应的事件监听，避免内存泄漏。

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