Редактор React-Quill с socket.io создает бесконечный цикл - PullRequest
0 голосов
/ 18 апреля 2020

Контекст: Я пытаюсь создать живой редактор. Так что несколько пользователей могут видеть изменения вживую. В качестве редактора я использую Reaction-Quill . А для передачи данных я использую сокет .

Идея:

  • При редактировании из клиента выдает изменения.
  • Сокет-сервер получит изменения и выдаст все соединения.
  • клиент получит внесенное изменение и отобразит его во всех редакторах.

Проблема: При наборе (быстро) в редакторе он автоматически выдает content.

Клиентская сторона:

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 });
  });
});

Это проблема с реакцией на перо или я делаю неправильно?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...