Javascript 从reactJS中的json响应创建动态表

我对react和UI都是新手，我想从对服务器的ajax调用收到的JSON响应中创建一个漂亮的表。我该怎么做呢

任何类型的信息都会非常有用

var Contact = React.createClass({
getInitialState: function(){
  return {}
},

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    Id: this.state.name,
    User: this.state.email,

  }

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://localhost:8080/ui/start',
    data: JSON.stringify({
      Id: this.state.name,
      User: this.state.email,
    })
  })
  .done(function(response) {
  console.log(response);

  // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
 } 

我的回答是这样的{'name'：'divya'，'id'：'1'，'task'：'xyz'}

---

谢谢。

将响应存储在状态数组中，并将数据动态映射到表中

更新：

使用最新的ES6语法，可以像

class Contact extends React.Component{
    state = {
          personData: []
      }

    submit = (e) => {

      e.preventDefault()

      console.log(this.state);

      var data = {
        Id: this.state.name,
        User: this.state.email,

      }

      $.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'http://localhost:8080/ui/start',
        data: JSON.stringify({
          Id: this.state.name,
          User: this.state.email,
        })
      })
      .done((response) => {
      console.log(response);
      this.state.userData.push({'name': response.name, 'id': response.id, 'task': response.task});
      this.setState({userData: self.state.userData});

      // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
     } 
     render() {
       return(
         <table>
           <thead>
              <tr>
                 <th>Name</th>
                 <th>ID</th>
                 <th>Task</th>
              </tr>
           </thead>
           <tbody>
           {this.state.userData.map((data, key) => {
              return (
              <tr key={key}>
                <td>{data.name}</td>
                <td>{data.id}</td>
                <td>{data.task}</td>
              </tr>
              )
           })}
           </tbody>
         </table>
       ) 
     }

类联系人扩展了React.Component{
状态={
个人资料：[]
}
提交=（e）=>{
e、 预防默认值（）
console.log（this.state）；
风险值数据={
Id:this.state.name，
用户：this.state.email，
}
$.ajax({
键入：“POST”，
数据类型：“json”，
网址：'http://localhost:8080/ui/start',
数据：JSON.stringify({
Id:this.state.name，
用户：this.state.email，
})
})
.完成（（响应）=>{
控制台日志（响应）；
this.state.userData.push（{'name'：response.name，'id'：response.id，'task'：response.task}）；
this.setState（{userData:self.state.userData}）；
//这就是JSON响应的地方。如何从这个响应**强文本**创建一个动态表，并在UI上呈现//
} 
render（）{
返回(
名称
身份证件
任务
{this.state.userData.map（（数据，键）=>{
返回(
{data.name}
{data.id}
{data.task}
)
})}
) 
}

下面我举一个例子

var Contact = React.createClass({
getInitialState: function(){
  return {
      personData: []
  }
},

submit: function (e){
  var self

  e.preventDefault()
  self = this

  console.log(this.state);

  var data = {
    Id: this.state.name,
    User: this.state.email,

  }

  $.ajax({
    type: 'POST',
    dataType: 'json',
    url: 'http://localhost:8080/ui/start',
    data: JSON.stringify({
      Id: this.state.name,
      User: this.state.email,
    })
  })
  .done(function(response) {
  console.log(response);
  self.state.userData.push({'name': response.name, 'id': response.id, 'task': response.task});
  self.setState({userData: self.state.userData});

  // This is where I have the JSON response .How can I create a dynamic table from this response **strong text**and render in on UI.  //
 } 
 render() {
   return(
     <table>
       <thead>
          <tr>
             <th>Name</th>
             <th>ID</th>
             <th>Task</th>
          </tr>
       </thead>
       <tbody>
       {this.state.userData.map((data, key) => {
          return (
          <tr key={key}>
            <td>{data.name}</td>
            <td>{data.id}</td>
            <td>{data.task}</td>
          </tr>
          )
       })}
       </tbody>
     </table>
   ) 
 }

var Contact=React.createClass({
getInitialState:函数（）{
返回{
个人资料：[]
}
},
提交：职能（e）{
var self
e、 预防默认值（）
self=这个
console.log（this.state）；
风险值数据={
Id:this.state.name，
用户：this.state.email，
}
$.ajax({
键入：“POST”，
数据类型：“json”，
网址：'http://localhost:8080/ui/start',
数据：JSON.stringify({
Id:this.state.name，
用户：this.state.email，
})
})
.完成（功能（响应）{
控制台日志（响应）；
self.state.userData.push（{'name'：response.name，'id'：response.id，'task'：response.task}）；
self.setState（{userData:self.state.userData}）；
//这就是JSON响应的地方。如何从这个响应**强文本**创建一个动态表，并在UI上呈现//
} 
render（）{
返回(
名称
身份证件
任务
{this.state.userData.map（（数据，键）=>{
返回(
{data.name}
{data.id}
{data.task}
)
})}
) 
}

我是个新手，但我也在寻找同样的东西，我希望这能帮助其他人更快地获得他们需要的结果。我花了一整天的时间来寻找类似的东西

我想肯定的是，这家伙的JSFIDLE为我指明了正确的方向：

虽然这对我来说很有效，但有几件事你必须先做。 1.创建一个状态，我将其称为加载，并在我的get initial状态下将其设置为true，如处的说明所示：。 2.我相信这段代码可以使用一些带胖箭头功能的擦洗，等等。无论如何它都不是完美的

var GeneralTable = React.createClass({

    generateRows: function() {
      if (this.props.loading === false) {
        var cols = Object.keys(this.props.books[0]), data = this.props.books;
        return data.map(function(item) {
            var cells = cols.map(function(colData) {
                return <td> {item[colData]} </td>;
            });
            return <tr key={item.id}> {cells} </tr>;
        });
      }
    },
    render: function() {
      let rowComponents = this.generateRows();
      let table_rows = []
      let table_headers = [];
      let data = this.props.books;

      if (this.props.loading === false) {
        let headers = Object.keys(this.props.books[0]);
        headers.forEach(header => table_headers.push(<th key={header}>{header}</th>));
        data.forEach(book => table_rows.push(<BookTableRow key={book.id} book={book} />));
      }
      return (
          <Table striped bordered>
              <thead><tr>{table_headers}</tr></thead>
              <tbody> {rowComponents} </tbody>
          </Table>
      );
    },
});

var generatable=React.createClass({
generateRows:function（）{
if（this.props.load===false）{
var cols=Object.keys（this.props.books[0]），data=this.props.books；
返回数据.map（函数（项）{
var cells=cols.map（函数（colData）{
返回{item[colData]}；
});
返回{cells}；
});
}
},
render:function（）{
让rowComponents=this.generateRows（）；
让表_行=[]
让表_头=[]；
让data=this.props.books；
if（this.props.load===false）{
让headers=Object.keys（this.props.books[0]）；
headers.forEach（header=>table_headers.push（{header}））；
data.forEach（book=>table_rows.push（））；
}
返回(
{table_headers}
{rowComponents}
);
},
});