console.log в editorState при расфокусировке отображает стек всех изменений - PullRequest
Новая
       27

console.log в editorState при расфокусировке отображает стек всех изменений

2 голосов
/ 10 июля 2020

Пожалуйста, отметьте сначала этот codeandbox .

Я написал компонент TextEditor, используя draft js, который получил 3 свойства:

  • text: html в виде строки
  • onChange: обратный вызов, который получает уникальный параметр (обновленную строку html)
  • onUnfocus: обратный вызов, который вызывается, когда вы щелкаете за пределами TextEditor

Если вы посмотрите на компонент App, где я использую свой TextEditor компонент, я сохраню текст в состоянии, которое я обновление с использованием onChange.

Щелчок за пределами TextEditor (с синим фоном) вызовет функцию onUnfocus, которая console.log состояние text.

Но если я напишите слово (скажем, Hello), а затем щелкните за пределами TextEditor Я получу столько console.log в качестве изменений: 

> H
> He
> Hel
> Hell
> Hello

Ожидаемое поведение - наличие одного console.log с последними изменениями: 

> Hello

Кто-нибудь знает, почему я получаю так много console.log?

1 Ответ

1 голос
/ 10 июля 2020

Проблема в том, что вы забыли вернуть свой useEffect помощник, а также не передали text в качестве зависимости, поэтому код очистки никогда не вызывается, поэтому каждый раз при визуализации он добавляет еще document.addEventListener без удаления предыдущего. 

React.useEffect(() => {
  return onClickOutsideHook( // add return here
    editorRef,
    (): void => {
      if (isFocus && onUnfocus !== undefined) {
        onUnfocus();
      }

      setIsFocus(false);
    }
  );
}, [editorState, isFocus, onUnfocus, text]); // add text as dependency
...