首页 > 其他分享 >记录一下react遇到的初始化异步赋值问题

记录一下react遇到的初始化异步赋值问题

时间:2022-08-25 21:35:10浏览次数:130  
标签:异步 obj temp 初始化 res id react content properties

组件加载时发送接口请求获取数据,在根据收集到的数据的某一项值在进行请求获取相对应的值,实现联动效果

 1 useEffect(() => {
 2     // getQuestionDetail({ id: '61a78f53245afb73590f4642aab4b3e1' }).then((res) => {
 3     getQuestionDetail({ id: rowData.id }).then(async (res) => {
 4       console.log('res', res);
 5       const {
 6         questionInfoMain: { content, questionDes, questionDetaildes, questionContent },
 7       } = res.data;
 8       questionForm.setFieldsValue({ questionDes, questionDetaildes, questionContent });
 9       console.log('content', JSON.parse(content));
10 
11       setCompts(JSON.parse(content));
12       getCompsData(JSON.parse(content));
13       var template = JSON.parse(content);
14       template.map((i) => {
15         const {
16           properties: { value },
17           _id,
18         } = i;
19         let o = {};
20         let id = _id;
21         o[id] = value;
22         questionForm.setFieldsValue(o);
23 
24         return i;
25       });
26 
27       let temp = JSON.parse(content);
28       await Promise.all(
29         _.map(temp, async (obj, index) => {
30           if (obj.type === 5) {
31             const codeRes = await getDicData(obj.properties.dic_code);
32             let item = codeRes.data?.filter((el) => el.code === obj.properties.value);
33             if (item) obj.properties.textValue = item[0]?.enumValues;
34             else {
35               obj.properties.textValue = obj.properties.value;
36             }
37           } else {
38             obj.properties.textValue = obj.properties.value || '';
39           }
40 
41           return obj;
42         })
43       );
44       console.log('temp', temp);
45       setCompts(temp);
46       setTextContent(temp);
47     });
48   }, []);

 

标签:异步,obj,temp,初始化,res,id,react,content,properties
From: https://www.cnblogs.com/zihang-cheng/p/16625815.html

相关文章

  • react 二级路由嵌套
    嵌套路由之后,静态文静路径错误,更改webpack 打包output输出根目录,publicPath:'/',二级路由刷新之后白屏,在首页模板文件中路径前加  /,   ......
  • localStorge在react中的使用
    1.什么时候用,在哪里用刚获取数据的时候,进行设置,localStorge.setItem(key,value);因为localStorge是用来作为缓存的,且有一定的延时,尤其是在本页面设置本页面使用时,所以,依然......
  • SpringBoot利用@Async注解实现异步调用
    前言:异步编程是让程序并发运行的一种手段,使用异步编程可以大大提高我们程序的吞吐量,减少用户的等待时间。在Java并发编程中实现异步功能,一般是需要使用线程或者线程池。而......
  • npm+react linux 开荒
    安装npmyuminstallnodejs.x86_64yuminstallnpm.x86_64 更新GCC版本(参考链接:https://blog.csdn.net/qq_39715000/article/details/120703444)升级到gcc7.3yum-y......
  • react实战系列 —— React 中的表单和路由的原理
    其他章节请看:react实战系列React中的表单和路由的原理React中的表单是否简单好用,受控组件和非受控是指什么?React中的路由原理是什么,如何更好的理解React应用的......
  • $.ajax异步请求无法下载文件到浏览器本地的问题
     //open这种方式有个弊端,就是转的参数值不能太大,所以只能用jquery创建表单form在提交(ajax异步请求不会触发浏览器下载文件的功能)varuserAgent=naviga......
  • NetCore异步编程CancellationToken
    十年河东,十年河西,莫欺少年穷学无止境,精益求精关于异步编程,很久之前就写过一遍博客:asp.netcore系列5项目实战之:NetCore的async和await(参考自:Microsoft教程)今天继......
  • react+antd upload实现图片宽高、视频宽高尺寸校验
    图片宽高校验方法://上传图片尺寸限制constcheckIconWH=(file:any)=>{returnnewPromise<void>(function(resolve,reject){constfileReader......
  • 综合案例-黑马旅游网_异步提交表单和servlet代码实现
    综合案例-黑马旅游网_异步提交表单在此使用异步提交表单是为了获取服务器响应的数据因为前台使用的是html作为视图层不能够直接从servlet相关的域对象获取值只能通过aj......
  • PHP+AJAX实现异步上传文件
    文件上传功能是动态Web应用程序的常用功能。通常,php采用提交表单并刷新页面的方法上传文件。但是,如果您想提供更好的用户体验,则可以使用jQuery和Ajax来上传文件而无需刷新......