Question

我有一个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>

Answer 1

您需要使用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 供您参考。

希望这会有所帮助。

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

1 个答案: