當父狀態更新時，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內部隨后的prop更改做出反應。