javascript - 我使用此代码，接收到发送过来的数据，为何会打印两次呢？

Question

我使用此代码，
参考：https://blog.csdn.net/lucky_ly/article/details/138096824
接收到发送过来的数据，为何会打印两次呢？

emitter目录：
emitter/index.ts

import type { Emitter } from 'mitt'

import mitt from 'mitt'

export default mitt() as Emitter<any> 

组件A：

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


function Index() {
    
    useEffect(() => {
        console.log('mounted') // 挂载后
      }, [])
    
    return <>
        AAA
        <button onClick={() => {
            console.log('按钮被点击')
            Emitter.emit('e1',{"name":"zhangsah=n"})
            }
        }>A发送信息到B</button>
    </>
}
export default Index

组件B：

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




function Index() {
    useEffect(() => {
        console.log('mounted') // 挂载后
        Emitter.on('e1',(e)=>{
            console.log('mitt test',e)
          })

      }, [])

    return <>
        BBB

    </>
}

export default Index

点击A组件按钮的时候，B组件内打印了两次：

Answer 1

从您提供的代码和描述来看，B组件中打印了两次mitt test消息的原因通常不是由于Emitter.emit('e1', ...)被调用了两次，而是因为Emitter.on('e1', ...)事件监听器被注册了两次。这通常发生在React组件的重新渲染或重新挂载时。

在React中，useEffect的依赖项数组（在您的情况下是[]）决定了这个effect何时运行。当依赖项数组为空时，effect会在组件挂载后运行，并在每次更新后重新运行（包括父组件的更新）。由于您的effect没有依赖任何props或state，因此每次组件重新渲染时，它都会重新运行，包括重新注册事件监听器。

为了解决这个问题，您需要在组件卸载时取消事件监听器的注册。您可以通过返回一个清除函数（cleanup function）来做到这一点，该清除函数在组件卸载前或effect的重新运行前被调用。

修改后的组件B代码如下：

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

function Index() {
    useEffect(() => {
        console.log('mounted'); // 挂载后
        
        const onE1 = (e) => {
            console.log('mitt test', e);
        };

        Emitter.on('e1', onE1); // 注册事件监听器

        // 返回一个清除函数，在组件卸载或effect重新运行前调用
        return () => {
            Emitter.off('e1', onE1); // 取消事件监听器的注册
        };

    }, []); // 依赖项数组为空，effect在挂载和每次更新后运行

    return (
        <>
            BBB
        </>
    );
}

export default Index;

在这个修改后的代码中，当组件卸载或effect重新运行时，清除函数会取消之前注册的事件监听器，从而防止了重复注册和多次打印的问题。