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

Question

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

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

如果您查看控制台并单击 "emit" 或 "child emit" 按钮，它工作正常。正在发射和接收信号。然而，一旦您点击 "child count" 按钮几次，然后返回并点击 "child emit"，您就会看到事情开始重复。

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

我在这里缺少什么概念？

谢谢

Answer 1

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

要仅创建一次监听器，请使用 useRef 并仅添加一次监听器，请使用 useEffect 钩子

示例代码

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

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

Trying to use an EventEmitter and useState at the same time. What am I doing wrong?

eventemitter

reactjs