如何使用 axios 和回调从外部文件进行 api 调用并在反应中传递参数

Question

所以，之前我也做过类似的事情。 sandbox

请参考这个

现在我正在尝试清理我的代码。

我在 table 中有一个删除选项，它将删除 table 中的条目。

现在我创建了一个单独的 API 文件，我在其中写入 API delete method 和请求对象，然后使用回调在我的组件中调用它。

问题：我需要将 UUID 传递给 api URL。而我这样做的方式，它被传递为 function() 而不是 value param.

所以当前请求URL：http://localhost:8000/api/v1/partnerApi/function%20(uuid)%20%7B%20%20%20%20%20%20%20%20_this.setState(%7B%20%20%20%20%20%20%20%20%20%20alert:%20/*

预期URL：http://localhost:8000/api/v1/partnerApi/534534rsfdsfe54efgd5

api.js

export const partnerApiAccess = {
  deleteAPI,
};


function deleteAPI(uuid, callback, errorCallack) {
  let at = localStorage.getItem("access_token");
  let auth = "Bearer " + at;

  // ! does not work. need to figure out to pass the uuid inside a url

  const requestOptions = {
    method: "DELETE",
    headers: { Authorization: auth },
    url: `${baseUrl}/partnerApi/${uuid}`,
  };

  return axios(requestOptions)
    .then((response) => {
      // handle success
      callback(response.data);
    })
    .catch((error) => {
      // handle error
      console.log("api error", error);
      errorCallack(error);
    });
}

然后是组件：

状态变量：

this.state = {
      isLoading: true,
      apiInfo: [],
      alert: null,
    };

这是单击删除按钮时调用的：

warningWithConfirmAndCancelMessage = () => {
    this.setState({
      alert: (
        <ReactBSAlert
          warning
          style={{ display: "block", marginTop: "-100px" }}
          title="Are you sure?"
          onConfirm={(uuid) => this.successDelete(uuid)}
          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>
      ),
    });
  };

// 这是我从 api.js

调用 API 方法的方法

deleteAdminAPInfo = (uuid) => {
    console.log("delete partner api info ----");
    partnerApiAccess.deleteAPI(uuid,
      (res) => {
        console.log("delete partner api info - api response:", res);
        this.setState({
          isLoading: false,
          apiInfo: this.state.apiInfo.filter(
            (info) => res.findIndex((item) => item.uuid === info.uuid) < 0
          ),
        });
      },

      (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 });
        }
      }
    );
  };

successDelete = (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>
        ),
      });
    });
  };

Answer 1

那是因为，在 successDelete 方法中，您将一个函数作为第一个参数传递给 this.deleteAdminAPInfo。

successDelete = (uuid) => {
this.deleteAdminAPInfo((uuid) => { // here there's the error
  this.setState({

因为在 deleteAdminAPInfo 中第一个参数传递给 partnerApiAccess.deleteAPI:

deleteAdminAPInfo = (uuid) => {
  console.log("delete partner api info ----");
  partnerApiAccess.deleteAPI(uuid,

partnerApiAccess.deleteAPI 将其用作 URL 参数：

const requestOptions = {
  method: "DELETE",
  headers: { Authorization: auth },
  url: `${baseUrl}/partnerApi/${uuid}`
};

您应该将 uuid 传递给 successDelete 中的 deleteAdminAPInfo 而不是函数。

如何使用 axios 和回调从外部文件进行 api 调用并在反应中传递参数

how to make api call from external file using axios and callbacks and pass param in react

parameters

callback

reactjs

axios