标签导航：

react组件间通信mitt库导致数据打印两次：如何避免重复注册事件监听器？

React组件间通信mitt库：解决重复打印数据问题

在使用mitt库进行React组件间通信时，可能会遇到数据重复打印的问题。本文将分析产生此问题的原因，并提供有效的解决方案。

问题描述：

组件A发送数据后，组件B接收并打印数据，但数据却打印了两次甚至多次。

代码示例（简化版）：

组件A:

import { useEffect } from 'react';
import emitter from '../../emitter';

function ComponentA() {
  useEffect(() => {
    console.log('ComponentA mounted');
  }, []);

  const handleClick = () => {
    console.log('Button clicked');
    emitter.emit('e1', { name: 'zhangsan' });
  };

  return (
    <button onClick={handleClick}>A发送信息到B</button>
  );
}

export default ComponentA;

组件B:

import { useEffect } from 'react';
import emitter from '../../emitter';

function ComponentB() {
  useEffect(() => {
    console.log('ComponentB mounted');
    emitter.on('e1', (e) => {
      console.log('mitt test', e);
    });
  }, []);

  return <div>B接收信息</div>;
}

export default ComponentB;

emitter/index.ts:

import mitt from 'mitt';

export default mitt();

问题分析：

问题根源在于useEffect钩子函数。在组件B挂载时，useEffect会注册emitter.on('e1', ...)事件监听器。如果组件B多次挂载（例如，路由切换或状态变化），监听器会被重复注册，导致emitter.emit('e1')触发时，打印多次。

解决方案：

使用useEffect的清理函数，在组件卸载前移除事件监听器，确保监听器只注册一次。

改进后的组件B:

import { useEffect } from 'react';
import emitter from '../../emitter';

function ComponentB() {
  useEffect(() => {
    console.log('ComponentB mounted');
    const unsubscribe = emitter.on('e1', (e) => {
      console.log('mitt test', e);
    });
    return () => {
      unsubscribe(); // 组件卸载时移除监听器
    };
  }, []);

  return <div>B接收信息</div>;
}

export default ComponentB;

通过unsubscribe()函数，在组件卸载（useEffect的清理函数执行）时，成功移除事件监听器，避免了重复注册和数据打印多次的问题。 这种方法确保了无论组件B如何重新渲染，e1事件的监听器始终只有一个，从而解决了数据重复打印的问题。