ReactDom.render 一直在生产未定义的道具？

Question

我很确定这里有简单的答案。我仍然是 React 的新手。在 DOM 中，我似乎获得了我的控制台日志的值，我正在递增这些值只是为了跟踪它的通过次数（仅被它弄糊涂了）。但是这个道具在什么时候变得未定义？这是我的代码。

"use strict";
import ReactDOM from 'react-dom';
import React from 'react';

var colors = ["Red","Green","Blue","Yellow","Black","White","Orange"];
var n = 0;
function increment(){
  n++;
  return n;
}

var List = React.createClass({
  getInitialState: function() {
    console.log("SORT1::",this.props.data + "  " + increment(n));
    return {data: this.props.data};
  },
  render: function() {
    console.log("SORT2::",this.props.data + "  " + increment(n));
    return <ul>
      {this.props.data.map(function(item,i) {
        return <li key={i}>{item}</li>;
      })}
    </ul>
  }
});

ReactDOM.render( <List data={colors} />, document.getElementById('app-container'));

export default List;

这是我的 DOM 的样子：

这里有一些额外的代码会影响这个。我的 index.js:

export MasterPage from './MasterPage'
export IndexPage from './IndexPage'
export HomePage from './HomePage'
export LoginPage from './LoginPage'
export RegisterPage from './RegisterPage'
export ResetPasswordPage from './ResetPasswordPage'
export VerifyEmailPage from './VerifyEmailPage'
export ProfilePage from './ProfilePage'
export ChangePasswordPage from './ChangePasswordPage'
export sortable from './sortable.js'

任何我的反应路由器：

import React from 'react';
import ReactDOM from 'react-dom';
import { IndexRoute, Route, browserHistory } from 'react-router';
import ReactStormpath, { Router, HomeRoute, LoginRoute, AuthenticatedRoute } from 'react-stormpath';
import { ChangePasswordPage, MasterPage, IndexPage, LoginPage, RegisterPage, ResetPasswordPage, 
VerifyEmailPage, ProfilePage, HomePage, sortable } from './pages';

ReactStormpath.init();

ReactDOM.render(
 <Router history={browserHistory}>
<HomeRoute path='/' component={MasterPage}>
 <IndexRoute component={IndexPage} /> 
  <LoginRoute path='/login' component={LoginPage} />
  <Route path='/verify' component={VerifyEmailPage} />
  <Route path='/register' component={RegisterPage} />
  <Route path='/change' component={ChangePasswordPage} />
  <Route path='/forgot' component={ResetPasswordPage} />
  <AuthenticatedRoute>
    <HomeRoute path='/home' component={HomePage} />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <HomeRoute path='/sortable' />        
  </AuthenticatedRoute>
  <AuthenticatedRoute>
    <Route path='/profile' component={ProfilePage} />        
  </AuthenticatedRoute>
 </HomeRoute>
  </Router>,
  document.getElementById('app-container')
 );

这是我的 html 单页应用程序模板正文：

<body>
  <div id="app-container"></div>
  <script src="/js/app.js"></script>
   </body>

Answer 1

colors 在您的全球范围内不可用。

从您的 sortable.js 中删除此行：

ReactDOM.render(, document.getElementById('app-container'));

在您的 react-router 中，更新几行：

<AuthenticatedRoute>
    <HomeRoute path='/sortable' component={sortable} />        
</AuthenticatedRoute>

ReactDom.render 一直在生产未定义的道具？

ReactDom.render keeps producing undefined prop?

javascript

reactjs

react-dom