React中API请求错误处理：如何实现仅接口成功时才显示按钮

问题根源 #

你当前的逻辑将triggerShowButton设为true的操作写在了Promise的错误回调分支中，因此只有接口调用失败时才会触发按钮显示，和需求完全相反。

修复步骤 #

1. 调整handleSubmit中的回调逻辑，将显示按钮的操作移到接口成功回调分支，同时建议在调用接口前重置按钮状态，避免上一次请求的结果残留。
   修改后的代码如下：

handleSubmit = (e) => {
     const {
       firstName, lastName, country, region, address, city, actions
     } = this.props;

     e.preventDefault();
     // 接口调用前先重置按钮状态，保证默认隐藏
     this.setState({
       ...this.state,
       triggerShowButton: false
     });

     verify(firstName, lastName, address, city, region, country)
       .then((data) => {
         actions.showSuccessNotification(data);
         // 仅接口请求成功时设置显示按钮
         this.setState({
           ...this.state,
           triggerShowButton: true
         });
       }, (err) => {
         // 接口请求失败时保持按钮隐藏，可在此处添加错误提示逻辑
         console.error('验证请求失败：', err);
       });
}

2. 确认state初始值
   保证state中triggerShowButton的初始值为false，确保页面首次加载时按钮处于隐藏状态：

// 构造函数中state初始化示例
constructor(props) {
  super(props);
  this.state = {
    // 其他state字段
    triggerShowButton: false
  }
}

额外注意事项 #

• 如果你的后端会返回2xx HTTP状态码，但业务逻辑上属于失败（比如参数校验不通过、权限不足等），需要在成功回调中先判断返回的业务状态码，符合成功条件再设置显示按钮，示例：

.then((data) => {
  // 假设后端返回的成功标记为 code === 0，请根据实际业务字段调整
  if (data.data.code === 0) {
    actions.showSuccessNotification(data);
    this.setState({ triggerShowButton: true });
  } else {
    // 业务失败时隐藏按钮，抛出错误提示
    actions.showErrorNotification(data.data.msg || '验证失败');
  }
})

• 你当前贴出的按钮渲染代码中onClick属性未赋值，实际使用时请补全对应的点击事件处理逻辑。

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