您可以修改自定义钩子，使用回调的返回值来决定提交是成功还是失败。有了这个返回值，钩子可以在第一次成功调用后停止允许提交。

const useCbOnceOrRetryOnFail = (cb) => {
    const [succeeded, setSucceeded] = useState(false);

    return (e) => {
        if (!succeeded) {
            setSucceeded(cb(e));
        }
    }
}

// Usage:
const handleSubmit = useCbOnceOrRetryOnFail((e) => {
    e.preventDefault()
    if (!name) {
       console.log('please enter the name and submit again')
       return false; // Remember to set to false whenever fails
   }
   console.log('submitted!')
   return true;
});

使用异步回调：

const useCbOnceOrRetryOnFail = cb => {
  const [success, setSuccess] = useState(false);

  return e => {
    if (!success) {
      setSuccess(true);
      cb(e, setSuccess);
    } else {
      e.preventDefault(); // Still need to preventDefault if clicked again
    }
  };
};

  const handleSubmit = useCbOnceOrRetryOnFail((e, setSuccess) => {
    e.preventDefault();
    if (!name) {
      console.log("please enter the name and submit again");
      setSuccess(false); // Remember to set to false whenever fails
    } else {
      console.log("submitted!");
       authenticate.then(() => {
         setSuccess(true);
       }).catch(() => {
         setSuccess(false);
       });
    }
  });

请注意，我们需要传递setSuccess回调而不是简单地返回。这是因为调用 api 是异步的，我们需要在它被解决/拒绝时更新成功状态。

您可以同时useCbOnce返回一个once函数和一个reset函数：

const useCbOnce = () => {
    const [called, setCalled] = useState(false);

    return {
      // Below can be wrapped in useCallback whenever re-renders becomes a problem
      once: (cb) => (e) => {
        if (!called) {
            setCalled(true);
            cb(e);
        }
      },
      reset: () => setCalled(false);
    }
}

const MyForm = (props) => {
    const [name, setName] = useState();
    const { cbOnce, reset } = useCbOnce();

    const handleSubmit = cbOnce((e) => {
        e.preventDefault()
        if (name) {
            console.log('submitted!')
            //all is good
        } else {
            console.log('please enter the name and submit again')
            reset();
        }
    });

    return (
      <form onSubmit={handleSubmit}>
        <input onChange={e => setName(e.target.value)} />
      </form>
    );
}