React中遍历多个数据tr,td

1,根据后台返回的数据来遍历table中的tr,td

分析:后台返回的数据类型:

[
  {time: "05-28", value: "3"},
  {time: "05-29", value: "0"},
  {time: "05-30", value: "6"},
  {time: "05-31", value: "2"},
  {time: "06-01", value: "7"},
  {time: "06-02", value: "7"}
]

所以我们得根据数组得长度来遍历tr,根据对象中的长度来遍历td
注意:对象的长度不能用.length方式获取,用js原生的Object.keys可以获取到

例如:var obj = {'time' : '05-28' , 'value' : '4'}; 
console.log(Object.keys(obj));  // ['time','value'] 
console.log((Object.keys(obj)).length);  //2

最后:代码如下:
 

<tbody>
{
 props.data.map((item, index) => {
  return (
   <tr key={index}>
    { //item 结果:{time: .., value: ...}
      // Object.keys(item) 结果:['time','value'] 
      //一定注意了得用item[td]来获取值如果用.来获取取不到值,因为td是字符串  
     Object.keys(item).map((td,i)=> <td key={i}>{item[td]}</td>)
     }
   </tr>
   )
 })
 }
</tbody>

遍历成功~

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值