在react框架中，Descriptions组件一般用来展示的详情，但有时再有多条详情时，只会渲染第一条，那是以为你在处理数据时处理的不正确。
Descriptions组件需要的数据格式是数组形式，他需要将每条数据的展示内容以数组包对象的形式传递；
例如：
{ name: '证书名称', value: res.data.info[i].name, }
一般情况下处理好的数据格式为：
let obj = []; for (let i = 0; i < res.data.info.length; i++) { obj.push( { name: '证书名称', value: res.data.info[i].name, }, { name: '证书等级', value: res.data.info[i].level, }, { name: '证书编号', value: res.data.info[i].uuid, }, { name: '获得时间', value: res.data.info[i].get_time, }, { name: '复审时间', value: res.data.info[i].check_time, }, { name: '到期天数', value: res.data.info[i].days, }, { name: '证件图片', value: ( <div> {res.data.info[i].img.map((item, index) => { return ( <img src={item.url} alt="" key={index} style={{ width: '100px', height: '100px' }} /> ); })} </div> ), }, { name: '', value: '', }, ); } setArray_xiangqing(obj);
但是这样又有一个弊端，当接口返回两条详情信息时只会展示一个；
只需要如下处理；
先用一个数组处理好详情页表头；
let array = []; array.push({ name: '姓名', value: title.name, }); array.push({ name: '电话', value: title.tel, });
然后执行上面那个obj数组；
最后合并数组放到变量这中
setArray_xiangqing([...array, ...obj]);
展示一下完整代码以及效果
let array = []; array.push({ name: '姓名', value: title.name, }); array.push({ name: '电话', value: title.tel, }); console.log(array); let obj = []; for (let i = 0; i < res.data.info.length; i++) { obj.push( { name: '证书名称', value: res.data.info[i].name, }, { name: '证书等级', value: res.data.info[i].level, }, { name: '证书编号', value: res.data.info[i].uuid, }, { name: '获得时间', value: res.data.info[i].get_time, }, { name: '复审时间', value: res.data.info[i].check_time, }, { name: '到期天数', value: res.data.info[i].days, }, { name: '证件图片', value: ( <div> {res.data.info[i].img.map((item, index) => { return ( <img src={item.url} alt="" key={index} style={{ width: '100px', height: '100px' }} /> ); })} </div> ), }, { name: '', value: '', }, ); } setArray_xiangqing([...array, ...obj]);
