はDOMない再レンダリング

Question

私は、JSファイルは以下の通りですリアクトリアクトCreateTable）

1、CreateColumnsをレンダリングCreateRows、最初のレンダリングに& ChangeResults

、CreateRows空ですが、コンポーネントが一旦マウントされると、fetch()行が更新され、ページの再レンダリングが行われ、テーブルが作成されます。

2.）ChangeResultsコンポーネントがロードされ、入力ボックスが作成されます。 num_of_rowsの状態を空の文字列（プレースホルダ、これを行う必要があるかどうかはわかりません）にします。

、それはその後、people_per_pageの状態を変更し、私は入力入力フィールドにいくつかの番号をクリックしてヒット、onClick実行（CreateTableで）関数を呼び出すupdateRowsupdatePageを、

。私はこれが実際に起こっていることを確認するために console.log()を持っていて、期待どおりに印刷します。

私はCreateRowsがpeople_per_pageを継承し、people_per_pageの状態を変更しているので、再レンダリングが発生すると考えましたが、何も起こっていません。

それは誰でも見ることができますか？ <CreateRows />で

var CreateTable = React.createClass({ 
    getInitialState: function(){ 
     console.log('initial state loaded') 
     return { 
      'table_columns' : ['id','email', 'first', 'last', 'title', 'company', 'linkedin', 'role'], 
      people_per_page: 34 
     } 
    }, 

    updateRows: function(rows) { 
     console.log(rows) 
     this.setState(
      {people_per_page: rows}, 
      function() { 
       console.log(this.state.people_per_page) 
      } 
     ) 
    }, 

    render: function(){ 
     return (
      <div> 
       <ChangeResults updateRows = {this.updateRows} /> 
       <table> 
        <CreateColumns columns={this.state.table_columns} /> 
        <CreateRows num_of_rows = {this.state.people_per_page} /> 
       </table> 
      </div> 
     ) 
    } 
}); 

var ChangeResults = React.createClass({ 
    getInitialState: function(){ 
     return { 
      num_of_rows : '' 
     } 

    }, 

    handleChange: function(e) { 
     this.setState({ 
      'num_of_rows' : e.target.value 
     }); 
    }, 

    updatePage: function(){ 
     this.props.updateRows(this.state.num_of_rows); 
    }, 

    render: function(){ 
     return (
      <div> 
       Number of people per page: <br /> 
       <input type="text" onChange = {this.handleChange} /> 
       <button onClick={this.updatePage}> Update Page </button> 
      </div> 
     ) 
    } 

}) 

var CreateColumns = React.createClass({ 
    render: function(){ 
     var columns = this.props.columns.map(function(column, i){ 
      return (
       <th key={i}> 
        {column} 
       </th> 
      ) 
     }); 

     return (
      <thead> 
       <tr> 
        {columns} 
       </tr> 
      </thead> 
     ) 
    } 
}); 

var CreateRows = React.createClass({ 
    getInitialState: function() { 
     return { 
      'people':[], 
     } 
    }, 

    componentDidMount: function(){ 
     console.log('componentDidMount running') 
     this.createRow(); 
    }, 

    createRow : function(){ 
     console.log('starting fetch') 
     fetch('http://localhost:5000/search', { 
      method: 'POST', 
      body: JSON.stringify({ 
       people_per_page: this.props.num_of_rows 
      }) 
     }) 
      .then(function(response) { 
       return response.json() 
      }) 
      .then((responseJson) => { 
       return this.setState({'people' : responseJson.people }) 
      }); 
    }, 


    render: function(){ 
     var rows = this.state.people.map(function(row, i){ 
      return (
       <tr key={i}>   
        <td>{row['id']}</td> 
        <td>{row['email']}</td> 
        <td>{row['first']}</td> 
        <td>{row['last']}</td> 
        <td>{row['title']}</td> 
        <td>{row['company']}</td> 
        <td>{row['linkedin_url']}</td> 
        <td>{row['role']}</td> 
       </tr> 
      ) 
     }) 
     return (
      <tbody> 
       {rows} 
      </tbody> 
     ) 
    } 
}); 


ReactDOM.render(<CreateTable />, document.getElementById('content')); 

Answer 1

最初のレンダリングのためのコンポーネントをページに「マウント」されたときに、componentDidMountだけ、と呼ばれています。その後、新しいデータをcomponentDidUpdateまたはアプリケーション内の他の場所に取得する必要があります。