阵营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或应用程序中的其他位置获取新数据。