• react redux dva 多次循环异步取数据的问题解决


    目的:根据查到的子分类,将其父分类也查出来,放入其中。

    使用方法:将子分类中的父分类字段去重后放入par_arr,然后遍历par_arr去取父分类,再将结果插入子分类的集合中。

    问题:console.log(res);的结果中包含了父分类,但组件未重新渲染。

    未解决之前的代码:

    services / filter.js

    import request from '../utils/request';
    
    function getOne(id){
    	return request('/api/categories/'+id);
    };
    export function fetch(){
    bardata = request('/api/categories').then(res=>{
                //将父分类去重,放入par_arr
                var par_obj={};
                var par_arr=[];
                res.data.map(d=>{
                    let _par=d.parent;
                    if(!par_obj[_par] && _par!=0){
                        par_obj[_par]=1;
                        par_arr.push(d.parent);
                    }
                });
    
                //根据par_arr获取父分类数据
                Promise.all(par_arr.map(id=>getOne(id))).then(res1=>{
                    res1.map(item=>{
                        res.data.push(item.data);
                    })
                });
                console.log(res);
                return res;
            })
    
            return bardata;
    }
    

    解决方法是:不要返回res变量,直接返回Promise.all(),即可在执行完之后再返回。

    我之前都陷入在 如何使res变量更新的死胡同里了。

    解决后的代码:

    import request from '../utils/request';
    
    function getOne(id){
    	return request('/api/categories/'+id);
    };
    
    export function fetch({id}){
    	if(id === 0){
    		return request('/api/categories').then(res=>{
    			
    			//去重得到父分类数组
    			var par_obj={};
    			var par_arr=[];
    			res.data.map(d=>{
    				let _par=d.parent;
    				if(!par_obj[_par] && _par!=0){
    					par_obj[_par]=1;
    					par_arr.push(d.parent);
    				}
    			});
    
    			//根据父分类数组去取父分类数据,加入子分类中
    			return Promise.all(par_arr.map(id=>getOne(id))).then(res1=>{
    				var res1Data_arr=[];
    				res1.map(item=>{
    					res1Data_arr.push(item.data);
    				});
    				res.data = res.data.concat(res1Data_arr);	
    				return res;
    			});
    		})
    		
    	}else{
    		return getOne(id);
    } };

     

    ps:欢迎访问我的小站:模板世界,获取更多有用的前端资源。

  • 相关阅读:
    npm install 报错 npm ERR! path /Users/lijuanwang/work/kr/krweb/node_modules/nodesass
    elementui tree权限树
    new Map()详解
    字符串中判断是否包含某个字符
    vue3 vuex4 store的响应式取值
    腾讯WeMap微信小程序报错之getLocation:fail the api need to be declared in the requiredPrivateInfos field in app.json
    vue 加密解密 ts项目中
    Object.entries()详解
    数组对象中,匹配value,删除对象
    js拼接html传参数
  • 原文地址:https://www.cnblogs.com/w2xh/p/7079602.html
Copyright © 2020-2023  润新知