title: Rendering Ajax request in React-Router Children
body: <p>I'm having a problem with React-Router and AJAX requests.</p>
  
  <p>Here is the index.js (the entry file):</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { App } from './App';
  import { Router, Route, IndexRoute, browserHistory } from 'react-router';
  
  import Utente from './routes/Utente';
  import UtenteView from './routes/UtenteView';
  
  render(
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" utente={mattia} component={App}&gt;
        &lt;Route path="user/:id" component={User}&gt;
          &lt;IndexRoute component={UserView}/&gt;
          &lt;Route path="rete" component={Rete}&gt;&lt;/Route&gt;
        &lt;/Route&gt;
      &lt;/Route&gt;
    &lt;/Router&gt;,
    document.getElementById('root')
  )
  </code></pre>
  
  <p>The App.js file has only the render function, that returns</p>
  
  <pre><code>&lt;div&gt;{this.props.children}&lt;/div&gt;
  </code></pre>
  
  <p>to call the User component. The User file is almost the same.</p>
  
  <p>In the UserView.js file, I make an AJAX request with <a href="http://visionmedia.github.io/superagent/" rel="nofollow">superagent</a></p>
  
  <pre><code>import React, { Component } from 'react';
  import request from 'superagent';
  
  export default class UserView extends Component{
    constructor(props) {
      super(props);
      this.state = {
        result: null
      };
      this.fetchRequest = this.fetchRequest.bind(this)
    }
    makeRequest(id){
      request
        .get('/API/user/' + id)
        .end(function(err, value){
          if (value){
            return({
              result: JSON.parse(value.text).name
            })
          }
        });
    }
  
    fetchRequest(){
      this.setState(this.makeRequest(this.props.params.id));
    }
  
    componentDidMount(){
      this.fetchRequest();
    }
  
    render(){
      if(typeof this.state.result !== 'undefined'){
        return(
        &lt;div&gt;
          &lt;p&gt;Questa è la pagina di {oggetto.id}&lt;/p&gt;
        &lt;/div&gt;
        )
      }
      return(
        &lt;div&gt;
          &lt;h4&gt;Loading data...&lt;/h4&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>But this doesn't work and it's giving me the error:</p>
  
  <pre><code>Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate().
  </code></pre>
  
  <p>Why? I think that the error is in the fact that I'm trying to manipulate the state of the parents through the children.</p>