在NodeJS的服務器端渲染期間，React無法找到data-reactid值「.3r0ietj75s.0.0.0.0.0.1」的根組件節點

Question

我正嘗試使用NodeJs構建一個同構React應用程序。

節點server.js文件使用'node-jsx-babel'來傳輸我反應組件的Jsx文件。

上server.js我在我的服務器路由文件得到

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

，我所說的反應成分，像這樣。

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

在安裝目錄組件進行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}，頁面會用ul和word來表示你好。 當我嘗試映射我獲得的數據並將其分配給ul時，應用程序崩潰。

我已確保反應組件不是我的任何其他組件的子依賴項，包括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

不知道是什麼原因造成了這個問題。希望能夠幫助解決這個問題的任何想法。謝謝

Answer 1

我想出問題是API的異步性質。 將文件內的數據內聯後，一切都很好。

只需要加入某種回調機制來完成這項工作。

雖然奇怪的錯誤信息。