React.js从数组创建多个表

Question

我已经寻找了解决我问题的解决方案，但是由于我缺乏理解，没有什么可以奏效的。

我正在尝试与react.js一起工作，以创建动态长度的表。

我使用返回JSON对象数组的Axios库中的项目中调用API，我们不知道返回数组的大小，但是对于数组中的每个JSON对象，我需要创建一个表并添加其数据。这是API调用返回的示例。

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

因此，在此返回中，我将不得不创建2个表，一个在另一个表下，如下：

| 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>;
}

渲染方法主要是一种视图，因此鼓励将逻辑移至单独的方法。

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>
  )
})}

在您的渲染方法中使用此