サーバサイドのレンダリングに反応する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コンポーネントを使用することはできませんでした。
したがって、AJAX呼び出しをReactコンポーネントの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に移動してみてください。