React中用Axios+回调从外部文件调API传UUID参数异常问题

你遇到的核心问题是在successDelete方法里，调用deleteAdminAPInfo时错误地传入了一个匿名函数，而非实际的UUID值，导致API层接收到的参数是函数对象，最终生成了包含函数字符串的错误请求URL。

修复步骤 #

1. 修正successDelete方法

把原来包裹uuid的匿名函数去掉，直接传递uuid值，并把弹窗更新逻辑作为成功回调传入：

successDelete = (uuid) => {
  // 直接传入uuid值，而非函数
  this.deleteAdminAPInfo(uuid, () => {
    this.setState({ 
      alert: (
        <ReactBSAlert success style={{ display: "block", marginTop: "-100px" }}
          title="Deleted!"
          onConfirm={() => this.hideAlert()}
          onCancel={() => this.hideAlert()}
          confirmBtnBsStyle="success"
          btnSize=""
        >
          The record has been deleted.
        </ReactBSAlert>
      )
    });
  });
};

2. 调整deleteAdminAPInfo方法

新增一个成功回调参数，同时简化列表过滤逻辑（直接用传入的uuid过滤，无需依赖API返回结果）：

deleteAdminAPInfo = (uuid, onSuccess) => {
  console.log("delete partner api info ----");
  partnerApiAccess.deleteAPI(uuid, (res) => {
    console.log("delete partner api info - api response:", res);
    this.setState({ 
      isLoading: false, 
      // 直接过滤掉当前uuid的项，逻辑更清晰
      apiInfo: this.state.apiInfo.filter(info => info.uuid !== uuid)
    });
    // 执行成功回调，触发弹窗更新
    onSuccess && onSuccess();
  }, (error) => {
    if (axios.isCancel(error)) {
      console.log("getmdi-Unable to fetch measurementsData", error.message);
      toast.error("Oops! Something went wrong.", { 
        position: "top-right", 
        autoClose: 5000, 
        hideProgressBar: false, 
        closeOnClick: true, 
        pauseOnHover: true, 
        draggable: true, 
        progress: undefined 
      });
    } else { 
      this.setState({ isLoading: true }); 
    }
  });
};

3. 确保警告弹窗正确传递UUID

如果你的表格删除按钮还没绑定当前行的uuid，需要补充这一步，确保弹窗确认时能拿到正确的uuid：

// 表格行中的删除按钮示例
<button onClick={() => this.warningWithConfirmAndCancelMessage(row.uuid)}>删除</button>

// 修正警告弹窗方法，接收并传递uuid
warningWithConfirmAndCancelMessage = (rowUuid) => {
  this.setState({ alert: (
    <ReactBSAlert warning style={{ display: "block", marginTop: "-100px" }}
      title="Are you sure?"
      // 确认时把当前行的uuid传给successDelete
      onConfirm={() => this.successDelete(rowUuid)}
      onCancel={() => this.cancelDetele()}
      confirmBtnBsStyle="success"
      cancelBtnBsStyle="danger"
      confirmBtnText="Yes, delete it!"
      cancelBtnText="Cancel"
      showCancel btnSize=""
    >
      You will not be able to recover this record
    </ReactBSAlert>
  )});
};

问题根源解释 #

原来的successDelete里，this.deleteAdminAPInfo((uuid) => { ... })是把一个函数作为参数传给了deleteAdminAPInfo，导致deleteAdminAPInfo中的uuid参数变成了这个函数对象。当这个函数被传到API层拼接到URL时，会被转成字符串形式，就出现了你看到的function%20(uuid)...错误URL。

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