javascript - 带有 socket.io 的 React-quill 编辑器创建无限循环

Question

背景：我正在尝试创建一个实时编辑器。这样多个用户可以实时看到更改。作为一名编辑，我正在使用react-quill。对于发送数据，我使用的是socket。

主意：

• 从客户端编辑时会发出更改。
• 套接字服务器将接收更改并为所有连接发出。
• 客户端将收到发出的更改并将其显示在所有编辑器上。

问题： 在编辑器上输入（快速）时，它会自动发出内容。

客户端：

export const QuillEditor = () => {
  ...
  ...
  const [value, setValue] = useState('');

  socket.on('emittedText', ({ content }) => {
    setValue(content);
  });

  const emitEditorData = (content: any) => {
    socket.emit('editorText', { content: content, id: id });
  };

  return (
    <>
      <ReactQuill
        style={{ height: 300 }}
        placeholder="Type and share..."
        theme="snow"
        value={value}
        onChange={(content, delta, editor) => {
          emitEditorData(content);
        }}
      />
    </>
  );
};

服务器端：

// handle socket connections and emits
io.on('connection', function(socket) {
  console.log('a user connected');

  socket.on('editorText', ({ content, id }) => {
    //id for group data store
    editorText[id] = content;
    io.emit('emittedText', { content });
  });
});

这是一个反应羽毛笔问题还是我做错了？

标签： javascriptreactjssocket.ioquillreact-quill