【React工作记录五十一】创建一个promise对象

简介: 【React工作记录五十一】创建一个promise对象

导语

歌谣 歌谣 有什么好的方式在react中将数据传给父组件




编辑


代码部分

return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((error, values) => {
        if (error) {
          reject();
          return;
        }
        const { activeUpdateData = {}, type } = this.props;
        const { birthdayTime } = values;
        const { imgUrl, listCards, activeOrgan, tags, tagList, 
tagListInfo } = this.state;
        if (!imgUrl && !activeUpdateData.headImg) {
          message.info(`请上传讲师头像!`);
          reject();
          return;
        }
        console.log(values, 'values');
        var arr2 = [];
        console.log(tagList, 'tagListTest');
        tagList.map((item) => {
          if (item.checked == true) {
            arr2.push({
              tagCode: item.tagCode,
              weight: item.weight || 
(tagListInfo && tagListInfo[0]
.weight),
              tagGroupCode: item.tagGroupCode 
|| (tagListInfo && tagListInfo[0].tagGroupCode),
              tagBizType: item.tagBizType ||
 (tagListInfo && tagListInfo[0].tagBizType),
            });
          }
          return arr2;
        });
        if (arr2.length == 0) {
          this.setState({
            errType: 'error',
            errMsg: '请选择主营课程',
          });
          return false;
        }
        const payload = {
          ...values,
          lecturerOrganizationCode: values.lecturerOrganizationCode[0].
code,
          invitePeople: values.invitePeople[0].customerCode,
          applyCustomerCode: values.applyCustomerCode[0].customerCode,
          lecturerId: activeUpdateData.lecturerId,
          certificateId: activeUpdateData.certificateId,
          contactId: activeUpdateData.contactId,
          birthdayTime: birthdayTime && birthdayTime.valueOf(),
          headImg: imgUrl || activeUpdateData.headImg,
          businessMerchantCode:
            values.lecturerOrganizationCode[0].businessMerchantCode
 ||
            activeUpdateData.businessMerchantCode,
          // activeOrgan.businessMerchantCode || 
activeUpdateData.businessMerchantCode, //经营商户编号
          platformMerchantCode:
            values.lecturerOrganizationCode[0].platformMerchantCode 
||
            activeUpdateData.businessMerchantCode,
          // activeOrgan.platformMerchantCode || 
activeUpdateData.businessMerchantCode, 
//平台商户编号
          // lecturerOrganizationCode: activeOrgan.code
 || activeUpdateData.lecturerOrganizationCode,
          certificateList: listCards.map((item) => {
            return {
              certificateImgPath: item.imageUrl,
              certificateImgType: item.key,
            };
          }),
          // tagList &&
          tagBizList: arr2,
          // lecturerDetails: text,
        };
        if (type === 'update') {
          payload.lecturerDetails = activeUpdateData.lecturerDetails;
          payload.lecturerId = activeUpdateData.lecturerId;
          payload.organizationId = activeUpdateData.organizationId;
        }
        console.log(payload, 'payload');
        resolve(payload);
      });
    });
  };

总结

利用promise的正确返回值作为结果返回给父组件使用

相关文章
|
9月前
|
设计模式 前端开发 JavaScript
|
9月前
|
JSON 前端开发 JavaScript
ES6类的使用和定义.Json.Promise对象的使用
ES6类的使用和定义.Json.Promise对象的使用
72 0
|
前端开发 Go
15 # promise 延迟对象的作用
15 # promise 延迟对象的作用
79 0
|
3月前
|
存储 前端开发
在React框架中,如何使用对象来管理组件的状态
在React中,组件状态通过`state`对象管理,利用`setState`方法更新状态。状态变化触发组件重新渲染,实现UI动态更新。对象结构清晰,便于复杂状态管理。
|
7月前
|
前端开发 安全
协程问题之协程函数返回的Promise对象必须满足哪些要求
协程问题之协程函数返回的Promise对象必须满足哪些要求
|
5月前
|
JSON 前端开发 中间件
React读取properties配置文件转化为json对象并使用在url地址中
本文介绍了如何在React项目中读取properties配置文件,将其内容转化为JSON对象,并在请求URL地址时使用这些配置。文章详细说明了异步读取文件、处理字符串转换为JSON对象的过程,并提供了一个封装函数,用于在发起请求前动态生成配置化的URL地址。
123 1
|
7月前
|
前端开发 JavaScript
ES6 中 Promise对象使用学习
ES6 中 Promise对象使用学习
56 1
|
8月前
|
JavaScript 前端开发 算法
虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。
【6月更文挑战第27天】虚拟DOM是React的关键技术,它是个轻量的JS对象树,模拟实际DOM结构。当状态改变,React不直接修改DOM,而是先构建新的虚拟DOM树。通过 diff 算法比较新旧树,找到最小变更,仅更新必要部分,提高性能,避免频繁DOM操作。虚拟DOM还支持跨平台应用,如React Native。它优化了更新流程,简化开发,并提升了用户体验。
53 1
|
9月前
|
前端开发 JavaScript API
Promise 对象与 Promises/A+ 规范
Promise 对象与 Promises/A+ 规范
117 0
|
7月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
86 0