當父狀態更新時，似乎不會呈現React子組件？

Question

我有一個（可能是愚蠢的）關於工作流程的問題，我顯然還沒有完全理解。

我有一個父組件，它通過ajax調用從服務器獲取數據。其中一個返回值是作爲屬性傳遞給子組件的布爾值。然而，子組件再次根據屬性值從服務器（ajax）獲取數據。不知怎的，父組件會不會相應地發生變化，但是孩子不會重新渲染？我究竟做錯了什麼？

父組件：

var L5fmModal = React.createClass({ 

     getInitialState : function() { 
      return { 
       initRunSwitch : false, 
       data : [] 
      }; 
     }, 

     componentDidMount: function() { 
      this.loadItems('L5fm/setState', null); 
     }, 

     loadItems : function(url, modalState) { 
      $.ajax({ 
       url: url, 
       contentType: 'application/json; charset=UTF-8', 
       data: {modalState : JSON.stringify(modalState)}, 
       dataType: 'json', 
       cache: false, 
       success: function(data) { 
        this.setState({data: data, initRunSwitch: true}); 
        console.log(this.state.data); 
       }.bind(this), 
       error: function(xhr, status, err) { 
        console.error(url, status, err.toString()); 
       }.bind(this) 
      }); 
     }, 

     changeListView : function() { 
      if (this.state.data.listView) { 
       var newData = update(this.state.data, { listView: { $set: false } }); 
      } 
      else { 
       var newData = update(this.state.data, { listView: { $set: true } }); 
      } 
      this.loadItems('L5fm/setState',newData); 
     }, 

     changeDirectory : function() { 
      if (this.state.data.dirState.private) { 
       var newData = update(this.state.data, {dirState : { private: { $set: false } } }); 
      } 
      else { 
       var newData = update(this.state.data, {dirState : { private: { $set: true } } }); 
      } 
      this.loadItems('L5fm/setState',newData); 
     }, 


     render: function() { 

      if (this.state.initRunSwitch) { 
       if(this.state.data.dirState.private) { 
        var browseIcon = "glyphicon-folder-open"; 
        var browseText = "browse all files"; 
       } 
       else { 
        console.log('undefined here'); 
        var browseIcon = "glyphicon-briefcase"; 
        var browseText = "browse private files"; 
       } 

       if (this.state.data.listView) { 
        var listIcon = "glyphicon-picture"; 
        var listText = "image View"; 
       } 
       else { 
        var listIcon = "glyphicon-list"; 
        var listText = "list View"; 
       } 
      } 

      return(

       <Modal {...this.props} bsSize="large" aria-labelledby="contained-modal-title-lg"> 
        <Modal.Header closeButton> 
         <div className="header-button-group"> 
          <L5fmHeaderButton buttonIcon="glyphicon-cloud-upload" buttonText="upload" /> 
          <L5fmHeaderButton onClick={this.changeListView} buttonIcon={listIcon} buttonText={listText} /> 
          <L5fmHeaderButton onClick={this.changeDirectory} buttonIcon={browseIcon} buttonText={browseText} /> 
         </div> 
        </Modal.Header> 

        {this.state.initRunSwitch ? <L5fmModalBody dirState={this.state.data.dirState} listView={this.state.data.listView} />:null} 
       </Modal> 
      ); 
     } 

    }); 

兒童組分（）：

var L5fmModalBody = React.createClass({ 

     getInitialState : function() { 
      return { 
       files : [] 
      }; 
     }, 

     componentDidMount: function() { 
      this.loadFiles('L5fm/setModalBodyState', this.props.dirState); 
     }, 

     loadFiles : function(url, dirState) { 
      $.ajax({ 
       url: url, 
       contentType: 'application/json; charset=UTF-8', 
       data: {dirState : JSON.stringify(dirState)}, 
       dataType: 'json', 
       cache: false, 
       success: function(data) { 
        this.setState({files: data}); 
       }.bind(this), 
       error: function(xhr, status, err) { 
        console.error(url, status, err.toString()); 
       }.bind(this) 
      }); 
     }, 

     render: function() { 

      var object = this.state.files; 

      return(
       <Modal.Body> 
        <Grid fluid={true}> 
         <Row> 
          {this.props.listView ? <L5fmModalBodyListView fileObject={object} /> : <L5fmModalBodyImageView fileObject={object} />} 
         </Row> 
        </Grid> 
       </Modal.Body> 
      ); 
     } 

    }); 

Answer 1

componentDidMount對初始只運行渲染（docs）。您應該對後面支持對componentWillReceiveProps內部的更改做出反應。