테이블 데이터 루핑 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" 
}, 
{ 
} 

콘솔 로그는 모든 데이터를 기록한다.

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

렌더링 논리를 루프에 넣어야합니다. 당신의 그런

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

렌더링 기능

<tbody> 
    {tableData} 
</tbody> 

비록 : 나는지도를 사용하여 효율적으로이 작업을 수행하는 방법이다 데이터

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

으로 예를했다 , 더 깨끗한 구현은 행을 자신의 c 행으로 가져 오는 것입니다 객체를 취하고 행을 반환하는 omponent 인 경우지도는 해당 구성 요소에 "obj"를 전달하면 채워진 객체를 반환합니다.

Answer 3

문제는 obj 변수가 로컬 for 루프 범위가, 당신이 시도하고 JSX 예를 들면 액세스 obj.domain 경우에 따라서, obj이 정의로 확인한다는 것입니다. 최상위 레벨에서 key 소품없이의 요소에 반응하는 것이

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

참고 :

나는 당신이 자바 스크립트의 .map로 할 수있는 JSON의 각 항목에 대한 새 <tr>를 표시한다고 가정 React는 배열의 모든 항목이 고유 키를 가져야한다는 경고를 발생시킵니다.

---

할 일이 널리 사용 반작용되는 map()의 사용뿐만 아니라 각 요소에 대해 고유 key의의 중요성에 익숙해 Lists and Keys에의 반작용 문서를 참조하십시오.

React.js and Dynamic Children - Why the Keys are Important을 읽어 보는 것이 좋습니다.이 사례는 사용 사례가 더욱 복잡해질 때 발생할 수있는 숨겨진 버그의 예를 보여줍니다.