查了一些资料貌似react的循环渲染对象只有map,但map只支持数组对象。

接到后台数据如下


{
"list": {
"A": [{
"image": "http:///b1.jpg",
"name": "奥迪",
"id": "1"
}],
"B": [{
"image": "http:///b1.jpg",
"name": "奔驰",
"id": "1"
}]
}
}

需要循环拿到A、B再循环拿到  A、B里边的数据

异步拿到数据后处理如下:


getbrandInfoFun = async type => {
try {
let result = await API.getbrandInfo({
id: 'wechat'
});
let carListArr = [];
for (let item in result.list) {//async、await中不支持map foreach 所以只能for方法
let reobj = {};
reobj[item] = result.list[item];
carListArr.push(reobj);
}
this.setState({
brandInfoList: carListArr,/* 正面状态 */
});
} catch (err) { } }

render处理如下:


<div className="carbrand_listbox">
{
this.state.brandInfoList.map((value, index) => {
let carListArr=[];
let carListkey=[];
for (let item in value) {
carListkey=item
carListArr=value[item];
}
return (
<div key={index}>
<div className="weui-cells__title" >{carListkey}</div>
{
carListArr.map((item, numberN) => (
<div key={numberN} className="weui-cell" data-carbrandid="" ><div className="weui-cell__hd"> <img className="lazy" src={item.image} /></div><div className="weui-cell__bd"> <p >{item.name}}</p></div>
</div>
))
}
</div>
)
})
}
</div>

实现效果:

 

 

感觉不好用但只想到这种方法了,希望以后有更好的方法;

来源:https://blog.csdn.net/qq_16591861/article/details/86527336

react 深度 循环嵌套对象渲染问题 map的更多相关文章

  1. react setState修改嵌套对象

    在react使用setState过程中,难免会遇到复杂的数据类型,,这里还要提醒一下setState 是异步操作行为,需要setState之后的结果做为参数,请求数据的话,可以配合 async  aw ...

  2. React技巧之循环遍历对象

    原文链接:https://bobbyhadz.com/blog/react-loop-through-object 作者:Borislav Hadzhiev 正文从这开始~ 遍历对象的键 在React ...

  3. React:快速上手(3)——列表渲染

    React:快速上手(3)——列表渲染 使用map循环数组 了解一些ES6 ES6, 全称 ECMAScript 6.0 ,是 JaveScript 的下一个版本标准,2015.06 发版.ES6 主 ...

  4. React 渲染嵌套对象,内部对象会是undefined

    在编译器中获取数据 发现报错 原因: render()一加载就会渲染,渲染的数据是初始state里的值 ,当setState会再次渲染 解决方法 1.三元运算 判断对象是否存在 2.在初始化对象的时候 ...

  5. bboss oreach循环嵌套遍历map

    foreach循环嵌套遍历mapforeach嵌套dsl脚本定义 <property name="dynamicInnerDsl"> <![CDATA[{ ## ...

  6. React.js 小书 Lesson13 - 渲染列表数据

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson13 转载请注明出处,保留原文链接和作者信息. 列表数据在前端非常常见,我们经常要处理这种类型 ...

  7. js对象详解(JavaScript对象深度剖析,深度理解js对象)

    js对象详解(JavaScript对象深度剖析,深度理解js对象) 这算是酝酿很久的一篇文章了. JavaScript作为一个基于对象(没有类的概念)的语言,从入门到精通到放弃一直会被对象这个问题围绕 ...

  8. React 也就这样 01——React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

  9. react 也就这么回事 01 —— React 元素的创建和渲染

    React 是一个用于构建用户界面的 JavaScript 库 它包括两个库:react.js 和 react-dom.js react.js:React 的核心库,提供了 React.js 的核心功 ...

随机推荐

  1. CoreText学习(二)之Hello world

    最后更新:2017-08-10 部分内容丢失,后续补上 相关配置: Xcode 8.3.3 Swift 3.0 macOS Sierra 一.CoreText 简介 CoreText 是用于处理文字和 ...

  2. centernet 相关

    1.下代码 git clone https://github.com/Duankaiwen/CenterNet.git 2.

  3. Python locust性能测试框架模板

    locust框架模板 from locust import HttpLocust, TaskSet, task import Queue class UserBehavior(TaskSet): de ...

  4. k8s-helm01-----helm基本使用

    什么是helm Helm 是 Kubernetes 生态系统中的一个软件包管理工具. 基础概念: Helm:客户端,主要负责管理本地的 Charts.repositories 以及与tiller服务器 ...

  5. [Mysql]一对多关系是如何发挥作用的?

    一个孩子只有一个妈妈,而一个妈妈可以有多个孩子,这是典型的一对多的关系,这里采用navicat图形化界面建立二者的关系. 第一步:创建mother表,如下图:  第二步:创建children表,在ch ...

  6. 关于Server2008 R2日志的查看

    Server 2008 r2通过 系统事件查看器 分析日志: 查看 系统 事件: 事件ID号: 审计目录服务访问 4934 - Active Directory 对象的属性被复制 4935 -复制失败 ...

  7. PHP上传超大文件解决方案

    一提到大文件上传,首先想到的是啥??? 没错,就是修改php.ini文件里的上传限制,那就是upload_max_filesize.修改成合适参数我们就可以进行愉快的上传文件了.当然啦,这是一般情况下 ...

  8. MongoDB 有关实体映射具体应用及对查询的影响

    1 创建实体的时候,可以用注解@Document 对实体进行设置,指定集合名字 /** * */ package com.cfj.ceshi.entity; import org.springfram ...

  9. Java Unsigned Bytes

    Having had to use unsigned bytes for the first time, I also had to learn how Java references these d ...

  10. Markov logic network

    A Markov logic network (or MLN) is a probabilistic logic which applies the ideas of a Markov network ...