ReactJS : 행을 동적으로 렌더링하는 방법

Question

가져온 API 데이터의 행을 동적으로 정렬하려면 문제가 발생합니다. 즉, API의 행 데이터가 자동으로 렌더링되도록 변경됩니다 (+/- 행). API에서 가져온 데이터를 표에 인쇄하려고합니다. 어쨌든 열은 동적으로 잘 인쇄되지만 열의 this.state.columns.map (column, index) =>에 사용하는 함수는 행과 같은 방식으로 작동하지 않습니다. ES6 표준,하지만 확실하지 않다 여기

Here is how it's look like, if the rows are not hardcoded. 내 코드 샘플입니다. 대신

class App extends React.Component 
{ 
    constructor() 
    { 
     super(); 
     this.state = { 
      rows: [], 
      columns: [] 
     } 
    } 

    componentDidMount() 
    { 

     fetch("http://ickata.net/sag/api/staff/bonuses/") 
      .then(function (response) 
      { 
       return response.json(); 
      }) 
      .then(data => 
      { 
       this.setState({ rows: data.rows, columns: data.columns }); 
      }); 

    } 

    render() 
    { 

     return (
      <div id="container" className="container"> 
       <h1>Final Table with React JS</h1> 
       <table className="table"> 
        <thead> 
         <tr> { 
          this.state.columns.map((column, index) => 
          { 
           return (<th>{column}</th>) 
          } 
          ) 
         } 
         </tr> 
        </thead> 
        <tbody> { 
         this.state.rows.map((row) => (
          <tr> 
           <td>{row[0]}</td> 
           <td>{row[1]}</td> 
           <td>{row[2]}</td> 
           <td>{row[3]}</td> 
           <td>{row[4]}</td> 
           <td>{row[5]}</td> 
           <td>{row[6]}</td> 
           <td>{row[7]}</td> 
           <td>{row[8]}</td> 
           <td>{row[9]}</td> 
           <td>{row[10]}</td> 
           <td>{row[11]}</td> 
           <td>{row[12]}</td> 
           <td>{row[13]}</td> 
           <td>{row[14]}</td> 
           <td>{row[15]}</td> 
          </tr> 
         )) 
        } 
        </tbody> 
       </table> 
      </div> 
     ) 
    } 
} 


ReactDOM.render(<div id="container"><App /></div>, document.querySelector('body')); 

, 내가, 내가 'TD'요소에 가치를 부여하는 경우, 행이 harcoded 인쇄 할 수 있었지만 API 내의 데이터가 변경된 경우 동적으로 인쇄하고 싶습니다.

내 Repo에 직접 기부하실 수 있습니다.Here is how looks like my example, when the rows values has been hardcoded within 'td' elements.

어떤 제안

부탁드립니다!

Answer 1

열과 행을 반복하는 것과 마찬가지로 행 셀을 반복하는 루프를 추가 할 수 있습니다. 예를 들어 :

this.state.rows.map(row => (
    <tr>{row.map(cell => (
    <td>{cell}</td> 
    ))} 
    </tr> 
)) 

참고 아마 key prop 추가 할 :

키가 변경되는 항목을 식별 반작용하는 데 도움이, 추가 또는 제거 입니다. 키는 배열 안의 요소에 주어져야합니다. 요소는 안정된 ID입니다.