zoukankan      html  css  js  c++  java
  • 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:欢迎访问我的小站:模板世界,获取更多有用的前端资源。

  • 相关阅读:
    链表的Java实现
    java知识点
    java知识点
    Android基础知识总结
    Android基础知识总结
    路由知识之ip route 命令中的疑惑
    Integer与int的种种比较
    求二叉树的宽度C语言版
    求二叉树的宽度C语言版
    二叉树的建立与递归遍历C语言版
  • 原文地址:https://www.cnblogs.com/w2xh/p/7079602.html
Copyright © 2011-2022 走看看