reactjs - 添加加载直到模态api数据加载反应

Question

我想将加载页面添加到我的模式中，直到数据加载到模式中。模态数据需要加载，直到它从 api 获得响应。我已经尝试了很多，但对我没有任何作用请指导或帮助我如何做到这一点

我的反应代码：

class MultiCheckBox extends React.Component {
  constructor() {
    super();
    this.state = {
      checkbox: [],
      courses: [],
      course: "",
      s3path: "",
      inference_model: "",
      triton_output: "",
      confidence: "",
      isOpen: false,
      options: [
        { label: "resnet", value: "resnet-50torch" },
        { label: "densenet", value: "densenet_onnx" },
        { label: "inception", value: "inception_graphdef" },
      ],
    };

    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleChangeCourse = this.handleChangeCourse.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  openModal = () => this.setState({ isOpen: true });
  closeModal = () => this.setState({ isOpen: false });

  handleChangeCourse = (event) => {
    this.setState({ course: event.target.value });
  };
  handleChange = (event) => {
    this.setState({ model: event.target.value });
  };

  getUnique(arr, comp) {
    const unique = arr
      //store the comparison values in array
      .map((e) => e[comp])

      // store the keys of the unique objects
      .map((e, i, final) => final.indexOf(e) === i && i)

      // eliminate the dead keys & store unique objects
      .filter((e) => arr[e])

      .map((e) => arr[e]);

    return unique;
  }
  handleSubmit(event) {
    const headers = {
      "Content-Type": "application/json;charset=UTF-8",
      "Access-Control-Allow-Origin": "*",
    };
    event.preventDefault();
    axios
      .post("http://localhost:3000/getmodell", {
        model: this.state.model,
        dataset: this.state.course,
        path: this.state.checkbox,
      })
      .then((res) => {
        // Res.data is the response from your server
        console.log(res.data);
      });
  }

  handleInputChange(event) {
    const target = event.target;
    var value = target.value;

    if (target.checked) {
      this.setState({ checkbox: event.target.value });
    } else {
      // this.state.hobbies.splice(value, 1);
    }
  }
  componentDidMount() {
    axios
      .get("http://localhost:5000/files")
      .then((response) => this.setState({ courses: response.data }));
  }

  submit() {
    const article = {
      model: this.state.model,
      dataset: this.state.course,
      path: this.state.checkbox,
    };

    axios
      .post("http://localhost:5000", article)
      .then((response) => this.setState({ s3path: response.data.s3_path }))
      .catch((error) => {
        this.setState({ errorMessage: error.message });
        console.error("There was an error!", error);
      });

    this.state.isOpen = true;
  }

  render() {
    const uniqueCouse = this.getUnique(this.state.courses, "dataset");

    const s3path = this.state.s3path;

    const filterDropdown = courses.filter(function (result) {
      return result.dataset === course;
    });
    return (
      <div className="container">
        <div className="row">
          <div class="col-12">
            <div class="form-row">
              <div class="col-md-12 text-center">
                <button
                  type="submit"
                  class="btn btn-success"
                  onClick={() => this.submit()}
                  style={{ marginBottom: "10px" }}
                >
                  Inference
                </button>
              </div>
            </div>
          </div>

          {/*<Button variant="primary" onClick={this.openModal}style={{marginTop:'5%',marginLeft:'47%'}}>
                              Show
                          </Button>  */}

          <Modal show={this.state.isOpen} onHide={this.closeModal}>
            <div id="oc-alert-container"></div>
            <Modal.Header closeButton>
              <Modal.Title>Inference Output</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <div class="card col-12">
                <div class="row no-gutters">
                  <div class="col-12">
                    <img src={s3path} class="card-img" alt="..." />
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">{triton_output}</h5>
                      <p class="card-text">Confidence:{confidence}</p>
                    </div>
                  </div>
                </div>
              </div>
            </Modal.Body>
            <Modal.Footer>
              <Button variant="secondary" onClick={this.closeModal}>
                Close
              </Button>
            </Modal.Footer>
          </Modal>
        </div>
      </div>
    );
  }
}

我无法上传完整的代码因为它包含太多不必要的数据我需要添加加载直到页面加载所以请给我想法模板或示例以便我可以自己制作任何帮助将不胜感激

标签： reactjs