在reactJS中創建一個來自json響應的動態表

Question

我是新來做的反應，以及用戶界面，我想從我的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. // 
} 

我的回答是這樣的{ '名'： '迪夫亞'， 'ID'： '1'， '任務'： '某某'}

感謝。

Answer 1

將響應存儲在狀態數組中並動態地將數據映射到表。

UPDATE：

與最新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> 
     ) 
    } 

下面我有一個例子來完成。

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

Answer 2

我是新來的反應，但一直在尋找同樣的事情，我希望這可以幫助別人得到他們需要更快的結果。我花了一整天的時間找到這樣的工作。

我要歸功於這個傢伙，他的jsfiddle是我指出了正確的方向：http://jsfiddle.net/jhudson8/dahdx6eu/

雖然有你必須首先做幾件事這對我的作品。 1.創建一個狀態，我稱它爲加載並在我的初始狀態下將其設置爲true，如下所示：React iterate over object from json data。 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> 
    ); 
    }, 
});