React.js配列から複数のテーブルを作成

Question

私の問題の解決策を探しましたが、私の理解が不足しているために何もできませんでした。

React.jsを使用して動的長さのテーブルを作成しようとしています。

axiosライブラリでJSONオブジェクトの配列を返すAPIを私のプロジェクトで呼びますが、返される配列のサイズはわかりませんが、配列内の各JSONオブジェクトについては、テーブルを作成し、データ。 API呼び出しの戻り値の例を次に示します。したがって、このリターンで私は次のように2つのテーブル、他の下に作成する必要があります

[ 

    { 
     "feedbackID": 12, 
     "posterID": "John", 
     "comment": "shortcomment" 
    }, 
    { 
     "feedbackID": 23, 
     "posterID": "billy", 
     "comment": "long comment" 
    } 
] 

：

| Feedback ID | 12   | 
| Poster ID | John   | 
| Comment  | shortcomment | 

| Feedback ID | 23   | 
| Poster ID | billy  | 
| Comment  | long comment | 

ここでは私のコードは、これまでのところです：

export class ViewFeedback extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { 
     feedback: [] 
    } 
    } 

    componentDidMount() { 
    var id = this.props.match.params.id; 

    // this returns the JSON array like shown above 
    getfeedback(id).then((response) => { 


    this.setState({feedback:response}) 

    }) 


    } 

ノー持っています私はテーブルを作る方法をすべて手がかりにしました。createElementとGridを試しましたが、間違っていてもコードをコンパイルしないでしょう。

Answer 1

これは動作するはずです：

renderTable =() => { 
    return this.state.feedback.map(value => { 
     return (
      <table> 
      <tr> 
       <td>Feedback ID</td> 
       <td>{value.feedbackID}</td> 
      </tr> 
      <tr> 
       <td>Poster ID</td> 
       <td>{value.posterID}</td> 
      </tr> 
      <tr> 
       <td>Comment</td> 
       <td>{value.comment}</td> 
      </tr> 
     </table> 
     ) 
    }) 
} 

render() { 
    return <div>{this.renderTable()}</div>; 
} 

Renderメソッドを、主として図であり、その別のメソッドにロジックを移動するが奨励されます。

Answer 2

{this.state.feedback.map(item => { 
    return (
    <table> 
     <tr> 
      <td>Feedback ID</td> 
      <td>{item.feedbackID}</td> 
     </tr> 
     <tr> 
      <td>Poster ID</td> 
      <td>{item.posterID}</td> 
     </tr> 
     <tr> 
      <td>Comment</td> 
      <td>{item.comment}</td> 
     </tr> 
    </table> 
) 
})} 

あなたのrenderメソッドで使用この