React 仅启动一次异步提交过程

Question

我们有一个带有提交按钮的表单，并且

OnClick

启动提交过程。这个提交过程是

async

，需要很长时间。在此过程中，我们不应该让再次开始提交，导致点击速度不够快导致多次提交。

提交过程最后返回一个布尔值 - 标记提交过程是否成功。如果没有 - 提交过程可以稍后重新执行。

  export default function FormFooter({onSubmitClick}:{onSubmitClick: ()=>Promise<boolean>}): ReactNode {
    const [inProgress, setInProgress] = useState(false);

    function execClickOnce(): void {
      if (!inProgress) {
        setInProgress(true);
      }
    }
    
    useEffect(() => {
      if (inProgress) {
        onSubmitClick().then((enableAgain) => setInProgress(!enableAgain));
      }
    }, [inProgress]);

    return (
      <button type="button"  onClick={execClickOnce} />
    );
  }

我们使用

useEffect

来判断

setInProgress

是否已更改，并异步启动提交过程。

不知怎的，我不喜欢这段代码。看起来太复杂了 - 但看起来效果很好。有人有更好的想法如何以更简单的方式解决问题吗？

另外 - 建议将

onSubmitClick

添加到

useEffect

依赖项数组中，但在这种特殊情况下，我真的认为这并不重要 - 因为我并不真正关心

onSubmitClick 的当前值

，是否改变并不重要。你对此有何看法？

我很高兴收到有关上述代码的任何建议和说明。谢谢你们！

Answer 1

尝试下面的代码，它应该可以工作。做了一些小改动，很可以理解。

import { useState } from 'react';

export default function FormFooter({ onSubmitClick }) {
  const [inProgress, setInProgress] = useState(false);

  async function handleClick() {
    if (!inProgress) {
      setInProgress(true);
      const success = await onSubmitClick();
      setInProgress(!success);
    }
  }

  return (
    <button type="button" onClick={handleClick} disabled={inProgress}>
      Submit
    </button>
  );
}