React中如何仅在API请求成功时禁用按钮，失败时保持按钮可点击

• 你的send请求方法逻辑错误，大概率是触发点击时就同步将buttonDisabled设为true，且没有区分API的成功/失败返回结果做差异化处理，甚至直接写了固定10秒后才恢复可点击的定时器，在请求失败的分支里没有立刻重置按钮状态。
• 也可能是你把防抖/节流逻辑和按钮禁用逻辑耦合了，强制设置了10秒的最小禁用时长，完全忽略了请求结果的判断。

根据你的需求分两种实现场景：

场景1：不需要防止用户重复提交，仅请求成功后才禁用按钮10秒 #

直接把按钮禁用的逻辑全部放到API请求的成功分支即可：

send = async () => {
  try {
    // 替换为你的实际API请求调用逻辑
    await yourApiRequestFunc();
    // 只有请求成功才执行禁用逻辑
    this.setState({ buttonDisabled: true });
    setTimeout(() => {
      this.setState({ buttonDisabled: false });
    }, 10000);
  } catch (error) {
    // 请求失败不处理按钮状态，保持可点击
    console.error('API请求失败：', error);
  }
}

场景2：需要防止用户重复提交，请求过程中临时禁用按钮 #

点击后先临时禁用避免重复请求，拿到结果后判断：失败立刻恢复可点击，成功则禁用满10秒再恢复：

send = async () => {
  // 发起请求前先临时禁用，避免重复点击
  this.setState({ buttonDisabled: true });
  try {
    // 替换为你的实际API请求调用逻辑
    await yourApiRequestFunc();
    // 请求成功，保持禁用10秒后恢复
    setTimeout(() => {
      this.setState({ buttonDisabled: false });
    }, 10000);
  } catch (error) {
    // 请求失败，立刻恢复按钮可点击
    this.setState({ buttonDisabled: false });
    console.error('API请求失败：', error);
  }
}

内容的提问来源于stack exchange，提问作者Kenny Quach