React Hook：仅当用户停止输入时才向服务器发送数据答案

【问题标题】：React Hook: only send data to server if the user stop typingReact Hook：仅当用户停止输入时才向服务器发送数据
【发布时间】：2020-01-20 21:21:09
【问题描述】：

我想要构建的是一个编辑器，它可以在不同的客户端之间同步数据。为了不使服务器过载，我考虑了一个时间窗口，必须在不采取任何操作的情况下将其传递给服务器。

目前我的反应状态有一个值编辑。如果编辑从 true 切换到 false，则会向服务器发送一个补丁请求，包含新的更新。

useEffect(() => {
    if (store.bootstrapFinished && store.editing === false)
        saveLesson(store, dispatch, true)
}, [store.editing])

Editing 设置为 true，当用户开始输入时（可能是标题更改或文本更改）。为了使文本与服务器同步，我想在用户不进行任何更改后将编辑设置为 false，但 useEffect 仅对特定值的更改做出反应，例如上面的代码示例或每个人。

但是是否还有一个像 useEffect 女巫这样的反应功能，每次编辑被派出时都会被调用，而不仅仅是在变化时？我阅读了一些关于 useRef 的内容，但并没有真正理解如何使用它。

【问题讨论】：

【解决方案1】：

你总是可以在 useEffect 中传递第二个参数，让 hook 知道它应该依赖什么值。

useEffect(() =>{}, [])

通过运行一个空数组 [] 作为第二个参数，你让 React 知道你的 useEffect 函数不依赖于任何来自 props 或 state 的值。

【讨论】：

【解决方案2】：

你应该在改变状态的同时运行 fetch 函数

setEditing(true)
fetchOperation()

【讨论】：

但是我在编辑和获取数据之间没有延迟！？这就是为什么我会认为每个字母都更改为服务器
这将取决于您如何处理异步获取，首先 setEditing(true) 然后 fetchOperation() 在回调中或然后或 async/await, setEditing(false)
我需要更多信息来理解这一点。您在上面编写的第一个函数以编辑 true 调度状态，不是吗？第二个将数据发送到服务器。延迟在哪里？如果我使用 (await fetch(...)) 将数据发送到服务器，唯一的延迟就是时间，而服务器需要响应或者异步获取是什么意思
你是否使用 async/await 异步调用不应该有任何问题 setEditing(true) await fetchOperation() setEditing(false)
在用户输入时设置编辑，而不是在将数据提取到服务器时设置