Unable to delete a record with an alert message

问题

I have react-table which is a simple CRUD application. I have a delete button for each row to delete that record.

On click of this delete button, an alert box pops up with options to delete and cancel

The delete option inside this alert box is unable to delete the record from the table. Although, I can see that deleted record in the browser console. Well, then it's probably not able to update the table.

I think in successDelete(), I'm incorrectly passing the apiInfo: this.state.apiInfo.filter((ai, prop) => ai.uuid !== prop.uuid),. But, now sure how to correct it.

Complete code can be found in the code sandbox. Below are relevant code snippets.

state variables:

this.state = {
      isLoading: true,
      apiInfo: [],
      alert: null,
    }; 

the functions responsible for it:

  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,
    });
  };

and then in return() inside the render:

<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>

回答1:

You'll need to call deleteAdminAPInfo in your successDelete method.

Since the deleteAdminAPIInfo method is async it will return to you a promise. So you can chain a then to it to show the success popup like this:

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>
      )
    });
  });
};

Also, since the DELETE call to the API seems to return the deleted data, you'll have to also filter it out from the state data on the frontend.

For that, you can do something like this in your deleteAdminAPInfo method:

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
        });
      }
    });
};

Here's an Updated CodeSandbox for your ref.

Hope this helps.

来源：https://stackoverflow.com/questions/63617486/unable-to-delete-a-record-with-an-alert-message