Как я могу реализовать отклонение автосохранения при изменении ввода в React? - PullRequest
Новая
       43

Как я могу реализовать отклонение автосохранения при изменении ввода в React?

0 голосов
/ 03 мая 2019

Итак, проблема в том, что у вас есть редактор.
Пользователь продолжает печатать в редакторе, и он некоторое время бездействует, как 5 секунд. Таким образом, после простоя в течение 5 секунд, вы сделали сетевой запрос к API, чтобы сохранить то, что он напечатал в базе данных. Он должен сделать только один запрос после 5 секунд простоя.

Я сделал это, но он сделал запросы, которые равны количеству слов. если вы наберете как asdf, он сделает четыре запроса API. В моем примере четыре console.log(); 

const EditorComponent = () => {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  // I need another logic which checks the time difference of idling.

  const debounced = () => {
    return debounce(() => {
      console.log("the api is going to call after 5 seconds");
    }, 5000);
  };

  const onEditorStateChange = value => {
    const rawContent = convertToRaw(value.getCurrentContent());
    const markdown = draftToMarkdown(rawContent);
    setEditorState(value);
    debounced()
  };

  return (
    <div style={{ width: "500px" }}>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
      />
    </div>
  );
};

export default EditorComponent;

1 Ответ

2 голосов
/ 03 мая 2019

Проблема в том, что при каждом рендеринге создается новая отлаженная функция, и поэтому API-интерфейсы вызываются несколько раз.Вы должны использовать useCallback, чтобы запоминать отклоненную функцию.Если вы хотите использовать editorState в обсуждаемой функции, вы можете передать его из метода onEditSatateChange при вызове debounced.Также вам нужно исправить ваш синтаксис debounce 

const EditorComponent = () => {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  // I need another logic which checks the time difference of idling.

  const debounced = useCallback(debounce(() => {
      console.log("the api is going to call after 5 seconds");
  }, 5000), []);

  const onEditorStateChange = value => {
    const rawContent = convertToRaw(value.getCurrentContent());
    const markdown = draftToMarkdown(rawContent);
    setEditorState(value);
    debounced()
  };

  return (
    <div style={{ width: "500px" }}>
      <Editor
        editorState={editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        onEditorStateChange={onEditorStateChange}
      />
    </div>
  );
};

export default EditorComponent;
...