尝试同时使用 EventEmitter 和 useState。我究竟做错了什么？答案

【问题标题】：Trying to use an EventEmitter and useState at the same time. What am I doing wrong?尝试同时使用 EventEmitter 和 useState。我究竟做错了什么？
【发布时间】：2020-08-07 01:17:17
【问题描述】：

我对 ReactJS 有点陌生，但我仍在努力解决问题。我目前在同时使用 useState 时使用 EventEmitter 时遇到问题。

这是我的沙盒： https://codesandbox.io/s/vibrant-germain-q4933

如果您观看控制台并单击“发射”或“子发射”按钮，它工作正常。正在发射和接收信号。然而，只要你点击“child count”按钮几次，然后返回并点击“child emit”，你会看到事情开始重复。

这个问题似乎只发生在您在同一个孩子中使用 useState 和emitter.on 时。它可能与将发射器作为道具传递有关。不确定这是否是个好主意。

我在这里在概念上缺少什么？

谢谢

【问题讨论】：

标签： reactjs eventemitter

【解决方案1】：

您不应直接在函数渲染周期内定义发射器实例。相反，您必须只创建和添加一次侦听器事件。

只创建一次listner，使用useRef；如果只添加一个listner，使用useEffect hook

示例代码

const App = props => {
  const myEmitter = useRef(new EventEmitter());
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    myEmitter.current.on("event", msg => {
      console.log("Parent received: " + msg);
    });
  }, []);

  const Send = () => {
    myEmitter.current.emit("event", "parent sending this message.");
  };

  return (
    <Content>
      <button onClick={Send}>emit</button>
      <button onClick={() => setCounter(counter + 1)}>count {counter}</button>
      <Child myEmitter={myEmitter.current} />
    </Content>
  );
};

import React, { useState, useEffect } from "react";

const Child = props => {
  const [counter, setCounter] = useState(0);

  useEffect(() => {
    props.myEmitter.on("event", msg => {
      console.log("Child received: " + msg);
    });
  }, [props.myEmitter]);

  const Emit = () => {
    props.myEmitter.emit("event", "child sending this message");
  };

  return (
    <>
      <button onClick={Emit}>child emit</button>
      <button onClick={() => setCounter(counter + 1)}>
        child count {counter}
      </button>
    </>
  );
};

export default Child;

Demo

【讨论】：