在NodeJS中的服务器端渲染期间，React无法找到数据重新触发值`.3r0ietj75s.0.0.0.0.0.1`的根组件节点

时间：2016-03-03 07:26:11

标签： node.js reactjs server rendering

我正在尝试使用NodeJs构建一个同构的React应用程序。

节点server.js文件使用'node-jsx-babel'来转换反应组件的Jsx文件。

我在server.js上

require('node-jsx-babel').install({ extension: '.jsx'});

在我的服务器路由文件上，我像这样调用react组件。

var React = require('react');
var ReactDOMServer = require('react-dom/server');
var Catalog = React.createFactory(require('./js/src/Components/Catalog/Catalog'));

app.get('/routename', function(req, res){


var reactHtml = ReactDOMServer.renderToString(Catalog({
    columns: 3,
    ...

    }));
    // Output html rendered by react

    res.render('reactSearch.ejs', {reactOutput: reactHtml});
    });

安装时的Catalog组件对另一个节点api进行api调用，并获得一些数据，这些数据在其状态变量this.state.data中成功获得。此组件的渲染块看起来像这样。

render: function() {

var MenuList = this.state.data.menu.map(function(menuItem,index){

     return(
       <li key={index}>
           <a className="search_prevent" href={menuItem.u}> {menuItem.n} </a>

       </li>
     )
   });

return (
<ul className="menu">
   {MenuList}
</ul>

)
}

在localhost:<port>/routename重新加载浏览器后，节点应用程序因此错误而崩溃。

Warning: React can't find the root component node for data-reactid value `.3r0ietj75s.0.0.0.0.0.1`. If you're seeing this message, it probably means that you've loaded two copies of React on the page. At this time, only a single copy of React can be loaded at a time.
/Users/nikil/Documents/ReactIsomorphicDemo/node_modules/react/lib/ReactMount.js:715
    firstChildren[0] = deepestAncestor.firstChild;

如果我从渲染块的<ul>内删除{MenuList}，我可以正常加载页面而不会出现任何错误。如果我用{Hello}替换{MenuList}，页面将使用ul和单词hello进行渲染。 当我尝试映射我获得的数据并将其分配给ul时，应用程序崩溃。

我确保react组件不是我的任何其他组件的子依赖项，包括React-DOM。

以下是 npm ls 的输出，以显示我的依赖关系图。

─┬ algoliasearch@3.13.0
│ ├── agentkeepalive@2.0.3
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├─┬ debug-ms-fix-yui-compressor@2.2.2-future-reserved-word-fix-ms
│ │ └── algolia-ms@0.7.1-fix-future-reserved-words
│ ├─┬ envify@3.4.0
│ │ ├─┬ jstransform@10.1.0
│ │ │ ├── base62@0.1.1
│ │ │ ├── esprima-fb@13001.1001.0-dev-harmony-fb
│ │ │ └─┬ source-map@0.1.31
│ │ │   └── amdefine@1.0.0
│ │ └── through@2.3.8
│ ├── es6-promise@3.1.2
│ ├── events@1.1.0
│ ├── inherits@2.0.1
│ ├── load-script@1.0.0
│ ├── lodash@3.10.1
│ ├── lodash-compat@3.10.2
│ ├── querystring@0.2.0
│ ├── semver@5.1.0
│ └── tunnel-agent@0.4.2
├── ejs@2.4.1
├─┬ express@3.1.0
│ ├── buffer-crc32@0.1.1
│ ├── commander@0.6.1
│ ├─┬ connect@2.7.2
│ │ ├── bytes@0.1.0
│ │ ├── formidable@1.0.11
│ │ ├── pause@0.0.1
│ │ └── qs@0.5.1
│ ├── cookie@0.0.5
│ ├── cookie-signature@0.0.1
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── fresh@0.1.0
│ ├── methods@0.0.1
│ ├── mkdirp@0.3.3
│ ├── range-parser@0.0.4
│ └─┬ send@0.1.0
│   └── mime@1.2.6
├── mime@1.2.11
├─┬ node-jsx-babel@0.14.2
│ ├─┬ babel-core@6.6.4
│ │ ├─┬ babel-code-frame@6.6.0
│ │ │ ├─┬ chalk@1.1.1
│ │ │ │ ├─┬ ansi-styles@2.2.0
│ │ │ │ │ └── color-convert@1.0.0
│ │ │ │ ├── escape-string-regexp@1.0.5
│ │ │ │ ├─┬ has-ansi@2.0.0
│ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ ├─┬ strip-ansi@3.0.1
│ │ │ │ │ └── ansi-regex@2.0.0
│ │ │ │ └── supports-color@2.0.0
│ │ │ ├── esutils@2.0.2
│ │ │ ├── js-tokens@1.0.2
│ │ │ ├─┬ line-numbers@0.2.0
│ │ │ │ └── left-pad@0.0.3
│ │ │ └─┬ repeating@1.1.3
│ │ │   └─┬ is-finite@1.0.1
│ │ │     └── number-is-nan@1.0.0
│ │ ├─┬ babel-generator@6.6.4
│ │ │ ├─┬ detect-indent@3.0.1
│ │ │ │ ├── get-stdin@4.0.1
│ │ │ │ └── minimist@1.2.0
│ │ │ ├─┬ is-integer@1.0.6
│ │ │ │ └─┬ is-finite@1.0.1
│ │ │ │   └── number-is-nan@1.0.0
│ │ │ ├─┬ repeating@1.1.3
│ │ │ │ └─┬ is-finite@1.0.1
│ │ │ │   └── number-is-nan@1.0.0
│ │ │ └── trim-right@1.0.1
│ │ ├── babel-helpers@6.6.0
│ │ ├── babel-messages@6.6.0
│ │ ├─┬ babel-register@6.6.0
│ │ │ ├── core-js@2.1.3
│ │ │ ├─┬ home-or-tmp@1.0.0
│ │ │ │ ├── os-tmpdir@1.0.1
│ │ │ │ └── user-home@1.1.1
│ │ │ ├─┬ mkdirp@0.5.1
│ │ │ │ └── minimist@0.0.8
│ │ │ └─┬ source-map-support@0.2.10
│ │ │   └─┬ source-map@0.1.32
│ │ │     └── amdefine@1.0.0
│ │ ├─┬ babel-runtime@5.8.35
│ │ │ └── core-js@1.2.6
│ │ ├── babel-template@6.6.4
│ │ ├─┬ babel-traverse@6.6.4
│ │ │ ├── globals@8.18.0
│ │ │ ├─┬ invariant@2.2.0
│ │ │ │ └─┬ loose-envify@1.1.0
│ │ │ │   └── js-tokens@1.0.2
│ │ │ └─┬ repeating@1.1.3
│ │ │   └─┬ is-finite@1.0.1
│ │ │     └── number-is-nan@1.0.0
│ │ ├─┬ babel-types@6.6.4
│ │ │ ├── esutils@2.0.2
│ │ │ └── to-fast-properties@1.0.1
│ │ ├── babylon@6.6.4
│ │ ├── convert-source-map@1.2.0
│ │ ├─┬ debug@2.2.0
│ │ │ └── ms@0.7.1
│ │ ├── json5@0.4.0
│ │ ├── lodash@3.10.1
│ │ ├─┬ minimatch@2.0.10
│ │ │ └─┬ brace-expansion@1.1.3
│ │ │   ├── balanced-match@0.3.0
│ │ │   └── concat-map@0.0.1
│ │ ├── path-exists@1.0.0
│ │ ├── path-is-absolute@1.0.0
│ │ ├── private@0.1.6
│ │ ├── shebang-regex@1.0.0
│ │ ├── slash@1.0.0
│ │ └── source-map@0.5.3
│ └─┬ babel-preset-react@6.5.0
│   ├─┬ babel-plugin-syntax-flow@6.5.0
│   │ └─┬ babel-runtime@5.8.35
│   │   └── core-js@1.2.6
│   ├─┬ babel-plugin-syntax-jsx@6.5.0
│   │ └─┬ babel-runtime@5.8.35
│   │   └── core-js@1.2.6
│   ├─┬ babel-plugin-transform-flow-strip-types@6.6.4
│   │ └─┬ babel-runtime@5.8.35
│   │   └── core-js@1.2.6
│   ├─┬ babel-plugin-transform-react-display-name@6.5.0
│   │ └─┬ babel-runtime@5.8.35
│   │   └── core-js@1.2.6
│   ├─┬ babel-plugin-transform-react-jsx@6.6.4
│   │ ├─┬ babel-helper-builder-react-jsx@6.6.4
│   │ │ ├─┬ babel-types@6.6.4
│   │ │ │ ├─┬ babel-traverse@6.6.4
│   │ │ │ │ ├─┬ babel-code-frame@6.6.0
│   │ │ │ │ │ ├─┬ chalk@1.1.1
│   │ │ │ │ │ │ ├─┬ ansi-styles@2.2.0
│   │ │ │ │ │ │ │ └── color-convert@1.0.0
│   │ │ │ │ │ │ ├── escape-string-regexp@1.0.5
│   │ │ │ │ │ │ ├─┬ has-ansi@2.0.0
│   │ │ │ │ │ │ │ └── ansi-regex@2.0.0
│   │ │ │ │ │ │ ├─┬ strip-ansi@3.0.1
│   │ │ │ │ │ │ │ └── ansi-regex@2.0.0
│   │ │ │ │ │ │ └── supports-color@2.0.0
│   │ │ │ │ │ ├── js-tokens@1.0.2
│   │ │ │ │ │ └─┬ line-numbers@0.2.0
│   │ │ │ │ │   └── left-pad@0.0.3
│   │ │ │ │ ├── babel-messages@6.6.0
│   │ │ │ │ ├── babylon@6.6.4
│   │ │ │ │ ├─┬ debug@2.2.0
│   │ │ │ │ │ └── ms@0.7.1
│   │ │ │ │ ├── globals@8.18.0
│   │ │ │ │ ├─┬ invariant@2.2.0
│   │ │ │ │ │ └─┬ loose-envify@1.1.0
│   │ │ │ │ │   └── js-tokens@1.0.2
│   │ │ │ │ └─┬ repeating@1.1.3
│   │ │ │ │   └─┬ is-finite@1.0.1
│   │ │ │ │     └── number-is-nan@1.0.0
│   │ │ │ └── to-fast-properties@1.0.1
│   │ │ ├── esutils@2.0.2
│   │ │ └── lodash@3.10.1
│   │ └─┬ babel-runtime@5.8.35
│   │   └── core-js@1.2.6
│   └─┬ babel-plugin-transform-react-jsx-source@6.5.0
│     └─┬ babel-runtime@5.8.35
│       └── core-js@1.2.6
├─┬ react@0.14.7
│ ├─┬ envify@3.4.0
│ │ ├─┬ jstransform@10.1.0
│ │ │ ├── base62@0.1.1
│ │ │ ├── esprima-fb@13001.1001.0-dev-harmony-fb
│ │ │ └─┬ source-map@0.1.31
│ │ │   └── amdefine@1.0.0
│ │ └── through@2.3.8
│ └─┬ fbjs@0.6.1
│   ├── core-js@1.2.6
│   ├─┬ loose-envify@1.1.0
│   │ └── js-tokens@1.0.2
│   ├─┬ promise@7.1.1
│   │ └── asap@2.0.3
│   ├── ua-parser-js@0.7.10
│   └── whatwg-fetch@0.9.0
├── react-addons-css-transition-group@0.14.7
├── react-dom@0.14.7
├── react-pager@1.1.2
└─┬ rest-js@1.1.2
  ├── es6-promise@2.3.0
  └─┬ superagent@0.21.0
    ├── component-emitter@1.1.2
    ├── cookiejar@2.0.1
    ├─┬ debug@2.2.0
    │ └── ms@0.7.1
    ├── extend@1.2.1
    ├─┬ form-data@0.1.3
    │ ├── async@0.9.2
    │ └─┬ combined-stream@0.0.7
    │   └── delayed-stream@0.0.5
    ├── formidable@1.0.14
    ├── methods@1.0.1
    ├── qs@1.2.0
    ├─┬ readable-stream@1.0.27-1
    │ ├── core-util-is@1.0.2
    │ ├── inherits@2.0.1
    │ ├── isarray@0.0.1
    │ └── string_decoder@0.10.31
    └── reduce-component@1.0.1

不确定导致此问题的原因。将不胜感激任何可以帮助解决这个问题的想法。感谢

1 个答案:

答案 0 :(得分：0)

我发现问题是API的异步性质。 在内联文件中的数据后，一切都很好。

只需要使用某种回调机制来完成这项工作。

虽然有奇怪的错误信息。

相关问题
最新问题