控制台中的ReactMount警告消息

Question

我正在开发一个简单的git问题视图应用程序，整个过程仍然只是一个文件，工作正常，但我在控制台中收到此警告

  

警告：ReactMount：Root元素已从原始元素中删除   容器。新容器：[object HTMLDivElement]

以下JS代码：

var React = require('react');
var ReactDom = require('react-dom');

var TitleMixin = {
    setTitle: function(str) {
        document.title = str.trim() + ' | Hello Kitty';    
    }
};

var LocalStorageMixin = {
    set: function(key, val) {
        localStorage.setItem(key, JSON.stringify(val));
    },
    get: function(key) {
        var val = localStorage.getItem(key);
        return JSON.parse(val);
    }
};

var App = React.createClass({

    mixins: [ TitleMixin ],

    getInitialState() {
        return {
            data: [],
            appTitle: ''
        };
    },

    fetchData() {
        var self = this;
        http('https://api.github.com/repos/octocat/Hello-World/issues')
            .get()
            .then(function(resp) {
                self.setState({ data: JSON.parse(resp) });
            });
    },

    componentDidMount() {
        this.fetchData();
        this.setTitle('Super App');
        this.state.appTitle = 'Super App';
    },

    render() {
        // console.log(this.state);

        var props = null,
            self = this;
        var children = React.Children.map(this.props.children, function(child) {

            if (child.type === AppToolbar) {
                props = { title: self.state.appTitle }
            }
            if (child.type === ListsContainer) {
                props = { listData: self.state.data };
            }

            return React.cloneElement(child, props);
        });

        // console.log('__props', props);

        return <div className="mdl-layout mdl-js-layout is-upgraded">
                { children }
            </div>
    }
});
/**
 * Components
 */
var AppToolbar = React.createClass({
    displayName: 'AppToolbar',

    render() {
        // console.log('__apptoolbar', this.props);

        return <header className="mdl-layout__header is-casting-shadow">
                <div className="mdl-layout__drawer-button">
                    <i className="material-icons"></i>
                </div>
                <div className="mdl-layout__header-row">
                    <span className="mdl-layout-title">{ this.props.title }</span>
                    <div className="mdl-layout-spacer"></div>
                </div>
            </header>;
    }
});
/**
 * ListsContainer
 * Sorts list content into correct lists
 */
var ListsContainer = React.createClass({
    displayName: 'ListsContainer',

    mixins: [ LocalStorageMixin ],

    getInitialState() {
        return { listData: [], watching: [] };
    },

    componentDidMount() {
        // console.log('__didMount', this.props);
        this.setState({
            listData: this.props.listData,
            watching: this.get('watching') || []
        });
    },

    componentWillReceiveProps(nextProps) {
        this.setState({ listData: nextProps.listData });
    },

    render() {
        console.log('__listscontainer', this.state);

        return <main className="mdl-layout__content">
                <div className="page-content">
                    <List title={'My Stuff'} listItems={ this.state.watching } />
                    <List title={'Backlog'} listItems={ this.state.listData } />
                </div>
            </main>;
    }
});

var List = React.createClass({

    getInitialState() {
        return {
            listItems: [],
            title: ''
        };
    },

    componentDidMount() {
        this.setState( this.props );
    },

    componentWillReceiveProps(nextProps) {
        this.setState({ listItems: nextProps.listItems });
    },

    toggleWatchItem(e) {
        e.preventDefault();

        console.log(e.target);
    },

    render() {
        // console.log('__list', this.state);
        var self = this,
            list = this.state.listItems.map(function(node, key){
            // console.log('__node',node);

            return <li key={ key } className="mdl-list__item mdl-list__item--three-line">
                    <span className="mdl-list__item-primary-content">
                        <i className="material-icons mdl-list__item-avatar">person</i>
                        <span>{ node.title }</span>
                        <span className="mdl-list__item-text-body">{ node.body } - #{ node.number }</span>
                    </span>
                    <span className="mdl-list__item-secondary-content">
                        <div className="mdl-list__item-secondary-action">
                            <button onClick={ self.toggleWatchItem.bind(self) }
                                className="mdl-button mdl-js-button mdl-button--raised">
                                    Watch
                            </button>
                        </div>
                    </span>
                </li>;
            });

        return <div><b>{ this.state.title }</b>
                <ul className="mdl-list">{ list }</ul>
            </div>;
    }
});

/**
 * Root and initiation
 */
var ROOT = document.getElementById('appmount');

ReactDom.render(
    <App>
        <AppToolbar />
        <ListsContainer />
    </App>,
    ROOT
);

HTML标记在这里

<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="apple-touch-icon" href="apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
        <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script>

    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="appmount" class="mdl-layout__container"></div>
        <script src="/js/bundle.js"></script>
    </body>
</html>