当前位置： 移动技术网 > IT编程>脚本编程>vue.js > React中遍历多个数据tr，td

React中遍历多个数据tr，td

2020年07月17日  | 移动技术网IT编程  | 我要评论

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>

遍历成功~

本文地址：https://blog.csdn.net/weixin_44824839/article/details/107352771

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网