时间戳

首页 > 解决方案 > 无法删除带有警报消息的记录

reactjs - 无法删除带有警报消息的记录

问题描述

编辑古建筑-imy30

我有 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, prop) => ai.uuid !== prop.uuid),
    });
  };
  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>

标签： reactjssweetalert

解决方案

你需要调用deleteAdminAPInfo你的successDelete方法。

由于deleteAdminAPIInfo方法是async它将返回给您一个承诺。因此，您可以将 a 链接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>
      )
    });
  });
};

此外，由于对DELETEAPI 的调用似乎返回了已删除的数据，因此您还必须将其从前端的状态数据中过滤掉。

为此，您可以在您的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
        });
      }
    });
};

这是您参考的更新的 CodeSandbox。

希望这可以帮助。

推荐阅读