问题描述
我有一个react-table,它是一个简单的CRUD应用程序。每行都有一个删除按钮以删除该记录。
点击此删除按钮后,会弹出一个警告框,其中包含删除和取消的选项
此警报框中的删除选项无法从表中删除记录。虽然,我可以在浏览器控制台中看到该删除的记录。好吧,那可能无法更新表格。
我认为在successDelete()
中,我错误地传递了 apiInfo: this.state.apiInfo.filter((ai,prop) => ai.uuid !== prop.uuid),
。但是,现在确定如何纠正它。
状态变量:
this.state = {
isLoading: true,apiInfo: [],alert: null,};
warningWithConfirmAndCancelMessage = () => {
this.setState({
alert: (
<ReactBSAlert
warning
style={{ display: "block",marginTop: "-100px" }}
title="Are you sure?"
onConfirm={() => this.successDelete()}
onCancel={() => this.cancelDetele()}
confirmBtnBsstyle="success"
cancelBtnBsstyle="danger"
confirmBtnText="Yes,delete it!"
cancelBtnText="Cancel"
showCancel
btnSize=""
>
You will not be able to recover this imaginary file!
</ReactBSAlert>
),});
};
successDelete = () => {
this.setState({
alert: (
<ReactBSAlert
success
style={{ display: "block",marginTop: "-100px" }}
title="Deleted!"
onConfirm={() => this.hideAlert()}
onCancel={() => this.hideAlert()}
confirmBtnBsstyle="success"
btnSize=""
>
Your imaginary file has been deleted.
</ReactBSAlert>
),apiInfo: this.state.apiInfo.filter((ai,});
};
cancelDetele = () => {
this.setState({
alert: (
<ReactBSAlert
danger
style={{ display: "block",marginTop: "-100px" }}
title="Cancelled"
onConfirm={() => this.hideAlert()}
onCancel={() => this.hideAlert()}
confirmBtnBsstyle="success"
btnSize=""
>
Your imaginary file is safe :)
</ReactBSAlert>
),});
};
hideAlert = () => {
this.setState({
alert: null,});
};
,然后在渲染器内的return()中:
<div className="content">
{this.state.alert}
<Button
fill="true"
onClick={this.warningWithConfirmAndCancelMessage}
color="danger"
size="sm"
className="btn-icon btn-link remove"
id="tooltip974171201"
>
<i className="fa fa-times" />
</Button>
</div>
解决方法
您需要使用deleteAdminAPInfo
方法调用successDelete
。
由于deleteAdminAPIInfo
方法是async
,它将返回给您一个承诺。因此,您可以将then
链接到它,以显示如下所示的成功弹出窗口:
successDelete = () => {
this.deleteAdminAPInfo().then(() => {
this.setState({
alert: ( <
ReactBSAlert success style = {
{
display: "block",marginTop: "-100px"
}
}
title = "Deleted!"
onConfirm = {
() => this.hideAlert()
}
onCancel = {
() => this.hideAlert()
}
confirmBtnBsStyle = "success"
btnSize = "" >
Your imaginary file has been deleted. <
/ReactBSAlert>
)
});
});
};
此外,由于对API的DELETE
调用似乎返回了已删除的数据,因此您还必须从前端的状态数据中过滤掉它。
为此,您可以在deleteAdminAPInfo
方法中执行以下操作:
deleteAdminAPInfo = async () => {
console.log("get partner api info ----");
await axios
.delete("https://run.mocky.io/v3/de5b1f30-7150-42de-8c58-3729c7ee0b88")
.then((response) => {
console.log("get partner api info - api response:",response.data);
this.setState({
isLoading: false,apiInfo: this.state.apiInfo.filter(
(info) => response.data.findIndex(item => item.uuid === info.uuid) < 0
)
});
})
.catch((error) => {
// handle error
if (axios.isCancel(error)) {
console.log("getmdi-Unable to fetch measurementsData",error.message);
} else {
this.setState({
isLoading: true
});
}
});
};
以下是 Updated CodeSandbox 供您参考。
希望这会有所帮助。