Javascript 如何在react中为setTimeout创建倒计时数字

我正在尝试创建撤消按钮的倒计时数字

例如：当用户点击“邀请”按钮邀请另一个用户加入团队时，邀请将从10倒计时到0，如果没有，则发送邀请单击“撤消”按钮

以下是我的代码：

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 [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>}

const-InviteCard=（道具）=>{
常数{
用户，
标签，
teamId，
privateTeamId，
被邀请者，
可获得的信息，
搜索查询，
邀请，
}=道具；
异步函数（e）{
如果（！user.verifiedDT）{
通知（“用户未验证其身份，无法邀请”）；
}否则{
const res=wait axios.post（“/api/v1/invests/invite”{
userToInvite:user.public\u user\u id，
teamId:teamId，
});
if（res.data.inviteWasCreated===false）{
通知（“用户已被邀请”）；
}else if（res.data.error！==未定义）{
通知（res.data.error）；
}else if（res.data.msg）{
如果（res.data.msg==“最大成员数”）{
toggleRequestModal（）；
setLimitType（“团队成员”）；
}
如果（res.data.msg==“最大邀请”）{
toggleRequestModal（）；
setLimitType（“邀请”）；
}
}否则{
通知（“邀请已发送”）；
setWhatToReload（“邀请数据”）；
被申请人（e）；
}
}
}
const[sent，setSent]=useState（false）；
const[timeoutId，setTimeoutId]=useState（）；
const handleSubmitInvite=（e）=>{
e、 预防默认值（）；
//10秒后调用“inviteToTeam”功能
const id=setTimeout（（）=>{
图腾（e）；
}, 10 * 1000);
setSent（！sent）；
//将计时器id保存在状态中
setTimeoutId（id）；
};
const onUndoClick=（timeoutId）=>{
//从状态获取超时id
//然后取消超时
setSent（假）；
clearTimeout（timeoutId）；
};
{！发送&&
！isInvitationAvailable（privateTeamId、用户邀请应用程序）和(
邀请
)}
{已发送（&Undo}

---

如何实现此功能？是否需要使用lodash？？？

我认为问题出在函数

OnEndoclick

中。您有一个名为

timeoutId

的状态，但

OnEndoclick

函数接受一个同名参数，因此它使用参数的值，您从不使用实际状态值，也从不取消超时。请尝试：

//参数已删除
const onUndoClick=（）=>{
//从状态获取超时id
//然后取消超时
setSent（假）；
clearTimeout（timeoutId）；
};

我认为问题出在函数

onEndoclick

中。您有一个名为

timeoutId

的状态，但

onEndoclick

函数接受一个同名参数，因此它使用参数的值，而您从不使用实际状态值，也从不取消超时。尝试：

//参数已删除
const onUndoClick=（）=>{
//从状态获取超时id
//然后取消超时
setSent（假）；
clearTimeout（timeoutId）；
};

是的，但是如果“邀请”按钮点击，我如何才能创建10到0的倒计时？nathan你想在发送邀请之前等待10秒，对吗？是的，对！！！@nathan我想这个解决方案可以。我是说是的，但是我如何向用户显示数字倒计时是的，但是如果“邀请”按钮点击，我如何创建10到0的倒计时？@nathan你想在发送邀请之前等待10秒，对吗？是的，对！！！@nathan我想这个解决方案可以。我是说是的，但是我如何向用户显示倒计时功能？在

操作中点击
行
clearTimeout（interval）
如何将interval发送到该按钮中获取interval是未定义的，而您可以在状态中访问“count”。
您的函数是否为
InviteToTam（）
？在
操作中点击
行
clearTimeout（interval）
如何将interval发送到该按钮中。获取interval是未定义的。同时，您可以访问状态中的“count”。
 const [count, setCount] = useState(10);

 const handleSubmitInvite = () => {
    const interval = setInterval(() => {
      setCount((currentCount) => --currentCount);
    }, 1000);
    //execute your function
    if (count === 0) {your fuction};

    // cleanup
    return () => clearInterval(interval);
 }

 const onUndoClick = () => {
   setSent(false);
 };