我在服务器端使用节点渲染反应时使用了这些npm依赖项。
var React = require('react');
var ReactDOMServer = require('react-dom/server');
var request = require('request');
我无法使用componentDidMount，因为在渲染服务器端时从不调用它。所以，我使用componentWillMount，我的最终代码结构是这样的：
var Content = React.createClass({
displayName: 'Content',
getInitialState: function getInitialState() {
console.log('getInitialState');
return {
xyz : [],
abc : ''
};
},
componentWillMount: function componentWillMount() {
console.log('componentWillMount');
request(
'some_url',
function (error, response, body) {
console.log(response.statusCode);
if (!error && response.statusCode == 200) {
console.log('Request Call');
this.setState = {
xyz : [],
abc : ''
}
}
}.bind(this));
},
render: function render() {
console.log('render');
return React.createElement(
'div',
{
className: 'clearfix container-fluid padding-none' },
React.createElement(TopSection, { title: this.state.title, slug: this.state.slug })
);
}
});
我的生命周期如下
getInitialState
componentWillMount
render
Request Call
render
并在第二次调用渲染后出现此错误
Warning: React can't find the root component node for data-reactid
value `.1va42hea328.1.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/me/Desktop/Projects/silly-poke/node_modules/react/lib/ReactMount.js:715
firstChildren[0] = deepestAncestor.firstChild;
^
TypeError: Cannot read property 'firstChild' of undefined
npm ls的输出如下：
├─┬ compression@1.6.2
│ ├─┬ accepts@1.3.3
│ │ ├─┬ mime-types@2.1.11
│ │ │ └── mime-db@1.23.0
│ │ └── negotiator@0.6.1
│ ├── bytes@2.3.0
│ ├─┬ compressible@2.0.8
│ │ └── mime-db@1.23.0
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── on-headers@1.0.1
│ └── vary@1.1.0
├─┬ express@4.14.0
│ ├─┬ accepts@1.3.3
│ │ ├─┬ mime-types@2.1.11
│ │ │ └── mime-db@1.23.0
│ │ └── negotiator@0.6.1
│ ├── array-flatten@1.1.1
│ ├── content-disposition@0.5.1
│ ├── content-type@1.0.2
│ ├── cookie@0.3.1
│ ├── cookie-signature@1.0.6
│ ├─┬ debug@2.2.0
│ │ └── ms@0.7.1
│ ├── depd@1.1.0
│ ├── encodeurl@1.0.1
│ ├── escape-html@1.0.3
│ ├── etag@1.7.0
│ ├─┬ finalhandler@0.5.0
│ │ ├── statuses@1.3.0
│ │ └── unpipe@1.0.0
│ ├── fresh@0.3.0
│ ├── merge-descriptors@1.0.1
│ ├── methods@1.1.2
│ ├─┬ on-finished@2.3.0
│ │ └── ee-first@1.1.1
│ ├── parseurl@1.3.1
│ ├── path-to-regexp@0.1.7
│ ├─┬ proxy-addr@1.1.2
│ │ ├── forwarded@0.1.0
│ │ └── ipaddr.js@1.1.1
│ ├── qs@6.2.0
│ ├── range-parser@1.2.0
│ ├─┬ send@0.14.1
│ │ ├── destroy@1.0.4
│ │ ├─┬ http-errors@1.5.0
│ │ │ ├── inherits@2.0.1
│ │ │ └── setprototypeof@1.0.1
│ │ ├── mime@1.3.4
│ │ ├── ms@0.7.1
│ │ └── statuses@1.3.0
│ ├── serve-static@1.11.1
│ ├─┬ type-is@1.6.13
│ │ ├── media-typer@0.3.0
│ │ └─┬ mime-types@2.1.11
│ │ └── mime-db@1.23.0
│ ├── utils-merge@1.0.0
│ └── vary@1.1.0
├── parent-require@1.0.0
├─┬ react@0.14.8
│ ├─┬ envify@3.4.1
│ │ ├─┬ jstransform@11.0.3
│ │ │ ├── base62@1.1.1
│ │ │ ├─┬ commoner@0.10.4
│ │ │ │ ├─┬ commander@2.9.0
│ │ │ │ │ └── graceful-readlink@1.0.1
│ │ │ │ ├─┬ detective@4.3.1
│ │ │ │ │ ├── acorn@1.2.2
│ │ │ │ │ └── defined@1.0.0
│ │ │ │ ├─┬ glob@5.0.15
│ │ │ │ │ ├─┬ inflight@1.0.5
│ │ │ │ │ │ └── wrappy@1.0.2
│ │ │ │ │ ├── inherits@2.0.1
│ │ │ │ │ ├─┬ minimatch@3.0.2
│ │ │ │ │ │ └─┬ brace-expansion@1.1.5
│ │ │ │ │ │ ├── balanced-match@0.4.1
│ │ │ │ │ │ └── concat-map@0.0.1
│ │ │ │ │ ├─┬ once@1.3.3
│ │ │ │ │ │ └── wrappy@1.0.2
│ │ │ │ │ └── path-is-absolute@1.0.0
│ │ │ │ ├── graceful-fs@4.1.4
│ │ │ │ ├── iconv-lite@0.4.13
│ │ │ │ ├─┬ mkdirp@0.5.1
│ │ │ │ │ └── minimist@0.0.8
│ │ │ │ ├── private@0.1.6
│ │ │ │ ├── q@1.4.1
│ │ │ │ └─┬ recast@0.10.43
│ │ │ │ ├── ast-types@0.8.15
│ │ │ │ ├── esprima-fb@15001.1001.0-dev-harmony-fb
│ │ │ │ └── source-map@0.5.6
│ │ │ ├── esprima-fb@15001.1.0-dev-harmony-fb
│ │ │ ├── object-assign@2.1.1
│ │ │ └─┬ source-map@0.4.4
│ │ │ └── amdefine@1.0.0
│ │ └── through@2.3.8
│ └─┬ fbjs@0.6.1
│ ├── core-js@1.2.6
│ ├─┬ loose-envify@1.2.0
│ │ └── js-tokens@1.0.3
│ ├─┬ promise@7.1.1
│ │ └── asap@2.0.4
│ ├── ua-parser-js@0.7.10
│ └── whatwg-fetch@0.9.0
├── react-dom@0.14.8
└─┬ request@2.72.0
├── aws-sign2@0.6.0
├── aws4@1.4.1
├─┬ bl@1.1.2
│ └─┬ readable-stream@2.0.6
│ ├── core-util-is@1.0.2
│ ├── inherits@2.0.1
│ ├── isarray@1.0.0
│ ├── process-nextick-args@1.0.7
│ ├── string_decoder@0.10.31
│ └── util-deprecate@1.0.2
├── caseless@0.11.0
├─┬ combined-stream@1.0.5
│ └── delayed-stream@1.0.0
├── extend@3.0.0
├── forever-agent@0.6.1
├─┬ form-data@1.0.0-rc4
│ └── async@1.5.2
├─┬ har-validator@2.0.6
│ ├─┬ chalk@1.1.3
│ │ ├── ansi-styles@2.2.1
│ │ ├── 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
│ ├─┬ commander@2.9.0
│ │ └── graceful-readlink@1.0.1
│ ├─┬ is-my-json-valid@2.13.1
│ │ ├── generate-function@2.0.0
│ │ ├─┬ generate-object-property@1.2.0
│ │ │ └── is-property@1.0.2
│ │ ├── jsonpointer@2.0.0
│ │ └── xtend@4.0.1
│ └─┬ pinkie-promise@2.0.1
│ └── pinkie@2.0.4
├─┬ hawk@3.1.3
│ ├── boom@2.10.1
│ ├── cryptiles@2.0.5
│ ├── hoek@2.16.3
│ └── sntp@1.0.9
├─┬ http-signature@1.1.1
│ ├── assert-plus@0.2.0
│ ├─┬ jsprim@1.3.0
│ │ ├── extsprintf@1.0.2
│ │ ├── json-schema@0.2.2
│ │ └── verror@1.3.6
│ └─┬ sshpk@1.8.3
│ ├── asn1@0.2.3
│ ├── assert-plus@1.0.0
│ ├── dashdash@1.14.0
│ ├── ecc-jsbn@0.1.1
│ ├── getpass@0.1.6
│ ├── jodid25519@1.0.2
│ ├── jsbn@0.1.0
│ └── tweetnacl@0.13.3
├── is-typedarray@1.0.0
├── isstream@0.1.2
├── json-stringify-safe@5.0.1
├─┬ mime-types@2.1.11
│ └── mime-db@1.23.0
├── node-uuid@1.4.7
├── oauth-sign@0.8.2
├── qs@6.1.0
├── stringstream@0.0.5
├── tough-cookie@2.2.2
└── tunnel-agent@0.4.3
表示没有其他版本的反应加载，因为我在搜索此错误时遇到了问题。
答案 0 :(得分：0)
您的问题是您在componentWillMount中发出请求。即使对于服务器端呈现，也会调用componentWillMount，因此当此请求返回时，它会尝试对不存在的组件设置setState（因为服务器端呈现使用renderToString）。
将请求移至componentDidMount，以便仅在客户端上调用它。
此外，如果您仍然想在服务器上呈现之前获取数据，请使用像redux-async-connect这样的内容。