javascript - 如何在React中的输入更改上实现去抖自动保存？

所以问题是，说您有编辑器。
用户不断在编辑器中输入内容，他空闲了大约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;

最佳答案

问题在于，在每个渲染上都会创建一个新的去抖动功能，因此会多次调用这些API。您必须使用useCallback来记忆去抖动功能。如果要在去反跳功能中使用editorState，则可以在调用onEditSatateChange时从debounced方法将其传递。另外，您需要更正您的反跳语法

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;