陣營DOM不會重新繪製

Question

我的陣營JS文件如下：

這背後的邏輯：

1）CreateTable呈現CreateColumns，CreateRows，& ChangeResults

在第一渲染，CreateRows是空的，但是一旦組件掛載，將調用fetch()來更新行，重新繪製頁面並且我有我的表格

2.）ChangeResults組件被加載，創建一個輸入框。狀態爲num_of_rows爲空字符串（佔位符，不知道是否我甚至需要這樣做）。

當我輸入一些數字到輸入字段和命中單擊，onClick運行updatePage，它調用函數updateRows（在CreateTable），即然後改變的people_per_page狀態。我有console.log()來驗證這是否真的發生，並按預期打印出來。

我想，既然CreateRows繼承people_per_page，而且我改變people_per_page狀態，它會導致重新繪製...但什麼也沒有發生。

任何人都可以看到爲什麼可能是？

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

在<CreateRows />，componentDidMount才調用用於第一渲染，當組件在頁上的「安裝」。之後，您需要在componentDidUpdate或應用程序中的其他位置獲取新數據。