Javascript ReactDom.render是否继续生成未定义的道具？_Javascript_Reactjs_React Dom

Javascript ReactDom.render是否继续生成未定义的道具？

javascript reactjs

Javascript ReactDom.render是否继续生成未定义的道具？,javascript,reactjs,react-dom,Javascript,Reactjs,React Dom,我很确定这里有一个简单的答案。我还是一个新手。在DOM中，我似乎获得了控制台日志的值，我增加这些值只是为了跟踪其传递的次数（仅此一点就让我感到困惑）。但这个道具在什么时候变得不明确？这是我的密码 "use strict"; import ReactDOM from 'react-dom'; import React from 'react'; var colors = ["Red","Green","Blue","Yellow","Black","White","Orange"]; var n

我很确定这里有一个简单的答案。我还是一个新手。在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;

任何我的反应路由器：

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')
 );

从“React”导入React；
从“react dom”导入react dom；
从“react router”导入{IndexRoute，Route，browserHistory}；
从“react stormpath”导入react stormpath、{Router、HomeRoute、LoginRoute、AuthenticatedRoute}；
导入{ChangePasswordPage、母版页、InExpage、LoginPage、RegisterPage、ResetPasswordPage、，
VerifyEmailPage、ProfilePage、HomePage、sortable}来自“/pages”；
ReactStormpath.init（）；
ReactDOM.render(
,
document.getElementById（'app-container'））
);

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

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

颜色在您的全球范围内不可用
从sortable.js中删除此行：

ReactDOM.render（，document.getElementById（'app-container'）
在react路由器中，更新几行：


颜色在您的全局范围内不可用
从sortable.js中删除此行：

ReactDOM.render（，document.getElementById（'app-container'）
在react路由器中，更新几行：


颜色总是有定义吗？您没有在其他地方更改它吗？这是我唯一定义和使用颜色的地方。我没有使用React，但您可能不应该使用{this.props.data.map（函数（项，I）{
试着用forEach
替换map
。你有没有其他的列表组件呢？@MateuszWoźniakforEach
在这里是没有用的。map
需要返回一个列表项数组。颜色总是定义的？你没有在其他地方更改它吗？这是我唯一定义的地方我不使用React，但可能您不应该使用{this.props.data.map（函数（项，I））来处理{
试着用forEach
替换map
。你有没有其他的列表组件？@MateuszWoźniakforEach
在这里没用。map需要返回列表项数组，所以我做了更改。我现在只得到2个控制台日志（而不是以前的4个）。主要是因为我去掉了ReactDom.render。但是现在的2个Im geting都未定义。因此，它会看到它在ReactRouter中，我在那里获得了未定义的。这些是我现在dom中的控制台日志。SORT1:：undefined 1 SORT2:：undefined 2看看这个：。抱歉延迟响应。我添加了颜色array在我的React路由器中指向我的可排序路由，以便它向下传递道具（.n然后在页面中刚刚使用了从路由器传递的道具（this.props.route.colors）。它现在可以工作了。现在开始更好地理解React路由器。感谢帮助。React是一个拥有数据流的新世界。再次感谢！）所以我做了更改。我现在只得到2个控制台日志（而不是以前的4个）。主要是因为我去掉了ReactDom.render。但是现在的2个Im geting都未定义。因此，它会看到它在ReactRouter中，我在那里获得了未定义的。这些是我现在dom中的控制台日志。SORT1:：undefined 1 SORT2:：undefined 2看看这个：。抱歉延迟响应。我添加了颜色array在我的React路由器中指向我的可排序路由，以便它向下传递道具（.n然后在页面中刚刚使用了从路由器传递的道具（this.props.route.colors）。它现在可以工作了。现在开始更好地理解React路由器。感谢帮助。React是一个拥有数据流的新世界。再次感谢！）
<body>
  <div id="app-container"></div>
  <script src="/js/app.js"></script>
   </body>

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