时间戳

首页 > 解决方案 > 如何使用 axios 和回调从外部文件调用 api 并在反应中传递参数

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

问题描述

所以，早些时候我做了同样的事情，就像这个解决方案一样。请参考这个沙盒

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

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

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

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

所以当前的请求网址：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/*

预期网址：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>
        ),
      });
    });
  };

标签： reactjsparameterscallbackaxios

解决方案

那是因为，在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 传递给deleteAdminAPInfoinsidesuccessDelete而不是函数。

推荐阅读