How to call an event on successful api response in react js.?

问题

I am trying to open a model whenever the API response is true but I am facing two issues here first is I cannot update the state of my local status object due to which model does not open what I want is whenever I get success in API my model component should be open. I am getting a status object in my API response and which is boolean below there is a function of submitPhoneNumber in which all the state update is done.

My component

import React, { Component } from "react";
import { ModalComponent, TextInputComponent } from "../../../components/index";
import IntlMessages from "../../../common/constants/IntlMessages";

export default class Comp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isOpen: false,
      status: false,
      email: "",
      number: "",
      address: "",
      error: "",
      code: "",
      selectedCode: "DK",
    };
  }
  componentDidMount() {
    this.setState({
      email: this.props.user.data.user.email || "",
      number: this.props.user.data.user.phone_number || "",
      address: this.props.user.data.user.address || "",
      error: "",
    });
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.updateEmPh !== this.props.updateEmPh) {
      if (!this.props.updateEmPh.status) {
        this.props.alertPopUp({
          open: true,
          type: "error",
          text: this.props.updateEmPh.errors || [`An error has occured`],
        });
      } else {
        this.props.alertPopUp({
          open: true,
          type: "success",
          text: [`Info Updated Successfully, Please check your email`],
        });
      }
    }
  }
  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen,
    });
  };

  handleChange(e, name) {
    this.setState({ [name]: e.target.value, error: "" });
  }

  submitPhoneNumber = () => {
    if (this.state.number.length < 1) {
      this.setState({ error: "Phone Number is Required" });
      return;
    }
    const { number } = this.state;
    let pnumber = `${this.props.user.data.user.country_code}${number}`;
    console.log(pnumber);
    const auth = this.props.user.data.user.access_token;
    this.props.verifyPhoneNumber({
      pnumber,
      auth,
    });
    const { status } = this.state;
    this.setState({ //here i want to update my local status object
      status: this.props.verifyPno.status,
      isOpen: !this.state.isOpen,
    });
  };
  render() {
    console.log("status", this.props.verifyPno.status);
    console.log("Istatus", this.state.status);
    return (
      <React.Fragment>
        {status ? (
          <ModalComponent
            isOpen={this.state.isOpen}
            toggle={this.toggleModal}
            className="customModel"
            size="md"
            body={
              <React.Fragment>
                <div className="modal-col">
                  <div className="row">
                    <button
                      type="button"
                      className="close"
                      onClick={() => this.toggleModal()}
                    >
                      <i className="fal fa-close"></i>
                    </button>
                  </div>
                  <div className="container pl-3 pt-5 pb-3">
                    <h3>
                      <IntlMessages id="sms.heading" />
                    </h3>
                    <div className="row">
                      <div className="input-group mb-3 form w-100">
                        <TextInputComponent
                          className="w-100"
                          name="code"
                          value={this.state.code}
                          placeholder="Indtast mobilnummer"
                        />
                      </div>

                      <div className="col align-self-center">
                        <p className="pointer text-primary">
                          <IntlMessages id="warning.text" />
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </React.Fragment>
            }
          />
        ) : null}
        <div className="col-lg-4">
          <form className="form bg-white p-3 mb-3">
            <div className="form-group mb-0 text-right">
              <button
                className="btn btn-default"
                type="button"
                onClick={this.submit}
              >
                {<IntlMessages id="profile.button.update" />}
              </button>
            </div>
          </form>
          <form className="form bg-white p-3 mb-3">
            <div className="row">
              <div className="col-4 mr-0">
                <label>
                  <IntlMessages id="profile.emailbox.field.code" />
                </label>
                <select className="custom-select" id="inputGroupSelect01">
                  <option>{this.props.user.data.user.country_code}</option>
                  {/* <option>{this.props.verifyPno.data.status}</option> */}
                </select>
              </div>
              <div className="col-8 ml-0 pl-0">
                <TextInputComponent
                  label={
                    <IntlMessages id="profile.emailbox.field.mobilenumber" />
                  }
                  type="text"
                  placeholder="Mobilnummer"
                  value={this.state.number}
                  onChange={(e) => {
                    this.handleChange(e, "number");
                  }}
                />
              </div>
            </div>
          </form>
        </div>
      </React.Fragment>
    );
  }
}

来源：https://stackoverflow.com/questions/65232921/how-to-call-an-event-on-successful-api-response-in-react-js