React服务器端渲染AJAX setState（） - 未定义文档

Question

没有来自AJAX请求的响应，我将没有任何内容显示给用户，即我将所有内容都存储在数据库中。 我的组件GenericPage.jsx：

export default class GenericPage extends React.Component { 
componentWillMount() { 
     if (this.store && this.onStoreUpdated) this.store.addChangeListener(this.onStoreUpdated); 
     if (!this.state.page && this.state.pageId) { 
      this.fetchData(); 
     } 
    } 
onPageStoreUpdated() { 
     console.info('onPageStoreUpdated'); 
     var page = PageStore.getCurrentObject(); 
     this.setState({page: page, loaded: true}); // the error goes away if I comment this out 
    } 
    render() { 
     ... 
    } 
} 

我的快递JS服务器代码：

server.get('*', function (req, res) { 
     res.header("Access-Control-Allow-Origin", "*"); 
     match({routes, location: req.url}, (error, redirectLocation, renderProps) => { 
      if (error) { 
       res.send(500, error.message) 
      } else if (redirectLocation) { 
       res.redirect(302, redirectLocation.pathname + redirectLocation.search) 
      } else if (renderProps) { 
       let htmlStr = React.renderToString(<RoutingContext {...renderProps} />); 
       res.header("Access-Control-Allow-Origin", "*"); 
       res.render('layout', { reactHtml: htmlStr }); 
      } else { 
       console.log('not found') 
       res.send(404, 'Not found') 
      } 
     }) 
    }); 

完整堆栈跟踪：

/Users/eric/af/frontend_app/node_modules/react/lib/getActiveElement.js:23 
    return document.body; 
     ^
ReferenceError: document is not defined 
    at getActiveElement (/Users/eric/af/frontend_app/node_modules/react/lib/getActiveElement.js:23:12) 
    at ReactReconcileTransaction.ReactInputSelection.getSelectionInformation (/Users/eric/af/frontend_app/node_modules/react/lib/ReactInputSelection.js:40:23) 
    at ReactReconcileTransaction.Mixin.initializeAll (/Users/eric/af/frontend_app/node_modules/react/lib/Transaction.js:168:30) 
    at ReactReconcileTransaction.Mixin.perform (/Users/eric/af/frontend_app/node_modules/react/lib/Transaction.js:133:12) 
    at ReactUpdatesFlushTransaction.Mixin.perform (/Users/eric/af/frontend_app/node_modules/react/lib/Transaction.js:134:20) 
    at ReactUpdatesFlushTransaction.assign.perform (/Users/eric/af/frontend_app/node_modules/react/lib/ReactUpdates.js:95:38) 
    at Object.flushBatchedUpdates (/Users/eric/af/frontend_app/node_modules/react/lib/ReactUpdates.js:175:19) 
    at Object.wrapper [as flushBatchedUpdates] (/Users/eric/af/frontend_app/node_modules/react/lib/ReactPerf.js:70:21) 
    at ReactDefaultBatchingStrategyTransaction.Mixin.closeAll (/Users/eric/af/frontend_app/node_modules/react/lib/Transaction.js:207:25) 
    at ReactDefaultBatchingStrategyTransaction.Mixin.perform (/Users/eric/af/frontend_app/node_modules/react/lib/Transaction.js:148:16) 

我使用react 0.13.3和react-router 1.0.0

Answer 1

原来，在服务器端无法实现使用React组件。
因此，我将我的React组件中的AJAX调用移动到componentDidMount，以便它们不影响服务器端。
，我需要得到在服务器端的数据，我让他们在我的服务器端节点JS代码，任何外界做出反应成分，我在渲染之前反应的组分：

server.get('*', function (req, res) { 
     res.header("Access-Control-Allow-Origin", "*"); 
     match({routes, location: req.url}, (error, redirectLocation, renderProps) => { 
      if (renderProps) { 
       someAsyncHttpRequest(someUrl) 
        .onSuccess((response) => { 
         page = response.body; 
         renderProps.params.page = page; 

         Dispatcher.dispatch({ 
           actionType: AppAction.PAGE_FETCHED, 
           data: page 
         }); 
        }); 
       let htmlStr = React.renderToString(<RoutingContext {...renderProps} />); 
       res.render('layout', { reactHtml: htmlStr }); 
      } 
     }) 
    }); 

Answer 2

如果您只在浏览器中加载数据，请尝试将ComponentWillMount代码移动到ComponentDidMount。