Question

我对ReactJS还是有些陌生，但仍然想将自己的想法束之高阁。当同时使用useState时，我目前在使用EventEmitter时遇到问题。

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

如果您观看控制台并单击“发射”或“子发射”按钮，则它可以正常工作。信号正在发射和接收。但是，一旦单击“子计数”按钮几次，然后返回并单击“子发射”，您将看到事情开始重复。

该问题似乎仅在您在同一子代中使用useState和发射器.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。我究竟做错了什么？

1 个答案: