Реактивный дочерний компонент, кажется, не отображается при обновлении родительского состояния?

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). Вы должны реагировать на последующие prop изменений внутри componentWillReceiveProps.