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

Question

所以问题来了，说您有编辑器。用户不断在编辑器中输入内容，他空闲了大约5秒钟。因此，在闲置5秒钟后，您向api发出了网络请求，以保存他在数据库中键入的内容。闲置5秒后，它只会发出一个请求。我做到了，但它提出的要求等于字数。如果您输入like 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;

Answer 1

问题在于，在每个渲染上都会创建一个新的去抖动功能，因此会多次调用这些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;