如何使用axios和回调从外部文件进行api调用，并在react中传递param

Question

所以，早些时候我做了与本解决方案相同的事情。请参阅沙箱

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

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

现在，我创建了一个单独的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，而不是函数。