react父组件触发接口请求，子组件接收返回response

接博文“react 解决一个页面多个表单校验产生冲突问题”

子组件定义方法，进行接口请求

return Promise.all([oneFormPromise, twoFormPromise])
      .then(() => {
        return new Promise(function (resolve, reject) {
          // 获取表单内容的值 文件名称
          const fileName = form.getFieldsValue().qualityReport.file.name;
          const { auditOpinion, auditStatus, auditor } = auditRef.current.btnValue();
          const param = {
            reviewId: auditType ? auditTaskInfo.id : taskNo.id + '',
            fileName: fileName,
            auditOpinion,
            auditStatus,
            auditor,
          };
          const formData = new FormData();
          formData.append('file', file.originFileObj);
          formData.append('taskNumber', taskNo.name);
          formData.append('industryCode', taskNo.industry);
          const xhr = new XMLHttpRequest();
          xhr.open('post', '/reportReview/api/v1/jianzai/file/upload', true);

          xhr.onload = function () {
            if (xhr.status == 200) {
              if (JSON.parse(xhr.responseText).code === 200) {
                const res = submitTaskInfo(param);
                resolve(res);
              } else {
                message.error('文件上传失败！');
              }
            }
          };
          xhr.onerror = function (e) {
            reject(e);
          };
          xhr.send(formData);
        });
      })
      .catch((err) => {
        console.log(err);
      });

细节点：

1. 返回promise类型，父组件用.then接收成功内容
2. xhr的status仅代表接口请求是否成功，需要再次对返回code判断，接收接口返回值内容（responseText是JSON类型，需要使用JSON.parse() 获取到code值）
3. onload方法限制只有readyState值为4时，进入到方法当中。onreadystatechange需要对readyState进行再次判断

父组件触发方法，接收返回值

// 触发子组件的方法调用接口
  handleOk = () => {
    this.auditRef.current.auditReport().then((res) => {
      if (res) {
        if (res.code === 200) {
          this.setState({
            visible: false,
            confirmLoading: false,
          });
          this.auditRef.current.resetForm();
          message.success('审核完成！');
          this.props.refreshPage();
        } else {
          this.setState({
            confirmLoading: false,
          });
          message.error(res.message);
        }
      }
    });
  };