循環訪問表數據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，其中展示了一個當您的用例變得更復雜時可能出現的隱藏錯誤的例子。