我如何使用 Debounce 去抖处理提交

Question

我正在尝试创建一个撤消按钮，当用户点击邀请按钮邀请另一个用户加入团队时，邀请将花费 10 秒，然后将邀请发送给该用户，同时使撤消按钮出现并在10s 用户可以撤消邀请。

在这种情况下如何使用 useDebounce？

这是我的以下代码：

import { useDebounce } from "use-debounce";

const InviteCard = (props) => {
  const {
    user,
    tab,
    teamId,
    privateTeamId,
    onSubmiteInvitee,
    isInvitationAvailable,
    searchQuery,
    invite,
  } = props;

  async function inviteToTeam(e) {
    if (!user.verifiedDT) {
      notify("User has not verified their identity, can not invite.");
    } else {
      const res = await axios.post("/api/v1/invites/invite", {
        userToInvite: user.public_user_id,
        teamId: teamId,
      });
      if (res.data.inviteWasCreated === false) {
        notify("User has already been invited.");
      } else if (res.data.error !== undefined) {
        notify(res.data.error);
      } else if (res.data.msg) {
        if (res.data.msg === "max members") {
          toggleRequestModal();
          setLimitType("team members");
        }
        if (res.data.msg === "max invites") {
          toggleRequestModal();
          setLimitType("invites");
        }
      } else {
        notify("Invite sent.");
        setWhatToReload("invite data");
        onSubmiteInvitee(e);
      }
    }
  }

  const handleSubmitInvite = (e) => {
    e.preventDefault();
    inviteToTeam(e);
  };

  let debounceInvite = useDebounce(inviteToTeam, 500);

  useEffect(() => {

  }, [debounceInvite]);

  return (
    <div ref={domNode}>
            <form onSubmit={handleSubmitInvite}>
              <button type="submit" className="invitees-invite-button">
                Invite
              </button>
            </form>
          </div>
  );
};

export default InviteCard;

更新。添加新功能：

  const [sent, setSent] = useState(false);
  const [timeoutId, setTimeoutId] = useState();
  const handleSubmitInvite = (e) => {
    e.preventDefault();
    // call "inviteToTeam" function after 10s
    const id = setTimeout(() => {
      inviteToTeam(e);
    }, 10 * 1000);

    setSent(!sent);
    // save the timer id in the state
    setTimeoutId(id);
  };

  const onUndoClick = (timeoutId) => {
    // get the timeout id from the state
    // and cancel the timeout
    setSent(false);
    clearTimeout(timeoutId);
  };

        {!sent &&
          !isInvitationAvailable(privateTeamId, user.InvitesApplications) && (
            <div>
              <form onSubmit={handleSubmitInvite}>
                <button type="submit" className="invitees-invite-button">
                  Invite
                </button>
              </form>
            </div>
          )}
        {sent && <button onClick={onUndoClick}>Undo</button>}

Answer 1

在这种情况下您不需要去抖。

您可以使用 setTimeout 延迟 10 秒来延迟 inviteToTeam 函数的调用，如果用户在调用 inviteToTeam 函数之前单击“撤消”按钮，您可以使用clearTimeout()函数取消超时。

const handleSubmitInvite = (e) => {
   e.preventDefault();
   
   // call "inviteToTeam" function after 10s
   const id = setTimeout(() => {
     inviteToTeam(e);
   }, 10 * 1000);

   // save the timer id in the state
   setTimeoutId(id);
};

如果点击“撤消”按钮，则取消超时

const onUndoClick = () => {
   // get the timeout id from the state
   // and cancel the timeout
   clearTimeout(timeoutId);
};

要保存超时 ID，您需要为其创建状态。

const [timeoutId, setTimeoutId] = useState(null);

我如何使用 Debounce 去抖处理提交

How can I useDebounce to debounce a handle submit

javascript

reactjs

debounce

react-hooks