Question

我有一个表单，当用户输入数据时，其他字段（可能）会受到影响。
因此，我扩展了封装 react-hook-form-fields 的组件，使其在其 updateFormValues 中调用另一个函数 (onBlur)。
updateFormValues 将当前表单数据发送到服务器，并在收到响应后更新数据。由于设置状态为 async，因此我将 useEffect 与 data 上的依赖项数组一起使用，以等待此操作完成。每当 useEffect 由于数据而被调用时，它都会使用 react-hook-forms 提供的 reset 方法重置 formValues。

为了避免用户在表单仍在刷新时重新输入值，我在 isLoading 调用的函数中设置了 onBlur 状态，并在 {{ 1}} 完成。 isLoading 禁用所有表单域，这是可以接受的。
这一切都按预期工作。

但现在问题来了：
当用户在字段中输入内容但没有离开时（因此 reset 尚未触发），他可以按下提交按钮。
现在，isLoading 已触发，但表单值尚未更新。如前所述，使用 onBlur 更新表单值发生在尚未调用的 onBlur 中。
这导致向服务器发送旧数据：reset 仍然具有未更新的版本。
我怎样才能在我的按钮的 useEffect 中等待 api.post(formMethods.getValues()) 完成？
到目前为止唯一的方法是使用`setTimeout(handleSubmit, 500)。但这很不令人满意，因为我不知道要等多久。我等待的越多，用户体验就越差。我等待的越少，发送错误数据的可能性就越大。

因为我在codeandboxes方面非常糟糕（我会在下一个空闲时间学习这个，它比你更让我烦恼），我希望这个动作流程令人满意以支持书面文字：

用户输入数据
用户按下提交，这会触发 useEffect
handleSubmit 调用 onBlur
在 onBlur 内调用 updateFormValues 时，formMethods.reset(parsedData) 尚未完成

相关方法：

formMethods.getValues()

Answer 1

万一有人遇到这个问题，这是我的解决方法：

loading 状态已从子组件移动到其父组件并传递给它。
handleDialogSubmit 已重命名为 submitDialog，这是保证数据仅在转换通过后提交的附加逻辑：

  const handleDialogSubmit = () => {
    setReadyToSubmit(true);
  };

  useEffect(() => {
    if (readyToSubmit && !loading) {
      submitDialog();
    }
  }, [loading, readyToSubmit]);

我对这种方法不满意，认为应该改变整体方式。
因此，我不会将此标记为已接受的答案，以防有人有更好的方法。

React/Forms：用户提交数据时如何通过useEffect等待更新数据，提交触发useEffect（需要时间）

1 个答案: