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。