循环访问表数据React JS

Question

如何循环访问React JS中的本地JSON数据并返回td标签中的数据？从JSON文件

实施例：

[ 
{ 
    "organize": true, 
    "sender": "Dach Group", 
    "domain": "godfrey.name", 
    "email": "Mercedes.OKon@gmail.com", 
    "folder": "Business" 
}, 
{ 
    "organize": true, 
    "sender": "Bernhard and Sons", 
    "domain": "torey.net", 
    "email": "Zack45@yahoo.com", 
    "folder": "Home" 
}, 
{ 
} 

控制台日志正在记录中的所有数据，因此，绝对抓取和显示数据与所述的for循环。

import React, { Component } from 'react'; 
import './TableHeader.css'; 
import localdata from './data'; 

class TableHeader extends Component { 
    render() { 

    for(var i = 0; i < localdata.length; i++) { 
    var obj = localdata[i]; 

    console.log(obj.organize + ", " + obj.sender + ", " + obj.domain + ", " + obj.email + ", " + obj.folder); 
    } 

return (
    <div className="container"> 

    <table className="table"> 
     <thead> 
     <tr> 
      <th style={{height: '50px'}}>Organize</th> 
      <th style={{height: '50px'}}>Sender</th> 
      <th style={{height: '50px'}}>Domain</th> 
      <th style={{height: '50px'}}>Email</th> 
      <th style={{height: '50px'}}>Folder</th> 
     </tr> 
     </thead> 

     <tbody> 
     <tr> 
      <td> 
       <input type="checkbox" name="" value="" /> 
      </td> 

      <td style={{backgroundColor: 'white'}}> 
       {obj.sender} 
      </td> 


      <td style={{backgroundColor: 'white'}}>{obj.domain}</td> 
      <td style={{backgroundColor: 'white'}}>{obj.email}</td> 
      <td style={{backgroundColor: 'white'}} className="bordercolor"> 
       <select style={{height: '30px', width: '100%'}}> 
       <option>Travel</option> 
       <option>Shopping</option> 
       <option>Finance</option> 
       </select> 
      </td> 
     </tr> 
     </tbody> 

    </table> 
    </div> 
); 
} 
} 

export default TableHeader; 

Answer 1

你应该把你的渲染逻辑放在一个循环中。我做出了表率与您的数据

class HelloWorld extends React.Component { 
 
    render() { 
 
    const data = [ 
 
     { 
 
      "organize": true, 
 
      "sender": "Dach Group", 
 
      "domain": "godfrey.name", 
 
      "email": "Mercedes.OKon@gmail.com", 
 
      "folder": "Business" 
 
     }, 
 
     { 
 
      "organize": true, 
 
      "sender": "Bernhard and Sons", 
 
      "domain": "torey.net", 
 
      "email": "Zack45@yahoo.com", 
 
      "folder": "Home" 
 
     }, 
 
    ]; 
 

 
    return (
 
     <div> 
 
     <table className="table"> 
 
      <thead> 
 
      <tr> 
 
       <th style={{height: '50px'}}>Organize</th> 
 
       <th style={{height: '50px'}}>Sender</th> 
 
       <th style={{height: '50px'}}>Domain</th> 
 
       <th style={{height: '50px'}}>Email</th> 
 
       <th style={{height: '50px'}}>Folder</th> 
 
      </tr> 
 
      </thead> 
 
      <tbody> 
 
      {data.map(obj => { 
 
       return (
 
       <tr> 
 
        <td> 
 
        <input type="checkbox" name="" value="" /> 
 
        </td> 
 
        <td style={{backgroundColor: 'white'}}> 
 
        {obj.sender} 
 
        </td> 
 
        <td style={{backgroundColor: 'white'}}>{obj.domain}</td> 
 
        <td style={{backgroundColor: 'white'}}>{obj.email}</td> 
 
        <td style={{backgroundColor: 'white'}} className="bordercolor"> 
 
        <select style={{height: '30px', width: '100%'}}> 
 
         <option>Travel</option> 
 
         <option>Shopping</option> 
 
         <option>Finance</option> 
 
        </select> 
 
        </td> 
 
       </tr> 
 
      ); 
 
      })} 
 
      </tbody> 
 
     </table> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 
ReactDOM.render(<HelloWorld />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 2

使用的地图是做到这一点的有效途径：

var tableData = localdata.map(function(obj) { 
return <tr><td>{obj.organizer}</td><td>{obj.sender}</td></tr> 
} 

然后在你的渲染功能

<tbody> 
    {tableData} 
</tbody> 

虽然，一个更清洁的实现是将行拖入其自己的c中一个接受一个对象并返回一行的omponent，那么你的地图只需将“obj”传递给该组件，它就会返回并填充它。

Answer 3

的问题是，你obj变量局部范围的for循环，因此当您尝试并获得obj.domain例如在JSX，obj解析为未定义。

我想你想在JSON的每个项目，您可以用JavaScript的.map做显示新<tr>：

<tbody> 
    { localdata.map(obj => { 
     return (
     <tr key={ obj.domain }> 
      <td>{ obj.domain }</td> 
     </tr> 
     ); 
    }) 
    } 
</tbody> 

注意，如果没有在顶级的key道具阵营元素在映射数组，React将会抛出一个警告，即数组中的所有项都必须具有唯一键。

---

务必阅读阵营的文档上Lists and Keys习惯的map()使用它被广泛应用于反应，以及独特的key S表示每个元素的意义。

我也推荐阅读React.js and Dynamic Children - Why the Keys are Important，其中展示了一个当您的用例变得更复杂时可能出现的隐藏错误的例子。