在React-Router儿童中渲染Ajax请求

Question

我遇到了React-Router和AJAX请求的问题。

这里是index.js（项文件）：

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(
    <Router history={browserHistory}> 
    <Route path="/" utente={mattia} component={App}> 
     <Route path="user/:id" component={User}> 
     <IndexRoute component={UserView}/> 
     <Route path="rete" component={Rete}></Route> 
     </Route> 
    </Route> 
    </Router>, 
    document.getElementById('root') 
) 

的App.js文件只渲染功能，即返回

<div>{this.props.children}</div> 

调用用户组件。用户文件几乎相同。

在UserView.js文件，我就与superagent

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(
     <div> 
     <p>Questa è la pagina di {oggetto.id}</p> 
     </div> 
    ) 
    } 
    return(
     <div> 
     <h4>Loading data...</h4> 
     </div> 
    ) 
    } 
} 

但是，这并不工作，它给我的错误的AJAX请求：

Warning: setState(...): You passed an undefined or null state object; instead, use forceUpdate(). 

为什么？我认为这个错误是因为我试图通过孩子来操纵父母的状态。

Answer 1

问题是，makeRequest是异步的，你不能从return。你应该这样做：

makeRequest(id){ 
    request 
    .get('/API/user/' + id) 
    .end((err, value) => { 
     if (value){ 
     this.setState({ 
      result: JSON.parse(value.text).name 
     }) 
     } 
    }); 
} 

此外，我会做你的组件这样的事情。你不应该为你的设置重写构造函数。此外，检查提取：

import React, { Component } from 'react'; 
import fetch from 'whatwg-fetch'; 

export default class UserView extends Component{ 

    componentDidMount() { 
    this.fetchRequest(this.props.params.id) 
    }, 

    fetchRequest(){ 
    fetch('/API/user/' + id) 
     .then((response) => { 
     return response.json() 
     }) 
     .then((json) => { 
     this.setState({ 
      result: json.name 
     }) 
     }) 
     .catch((ex) => { 
     console.log('parsing failed', ex) 
     }) 
    } 

    getLoadingMessage() { 
    if(typeof this.state.result === 'undefined') { 
     return 
    } 

    return (
     <div> 
     <h4>Loading data...</h4> 
     </div> 
    ) 
    }, 

    getMessage() { 
    if(typeof this.state.result !== 'undefined') { 
     return 
    } 

    return (
     <div> 
     <p>Questa è la pagina di {oggetto.id}</p> 
     </div> 
    ) 
    }, 

    render(){ 
    return (
     <div> 
     { this.getLoadingMessage() } 
     { this.getMessage() } 
     </div> 
    ) 
    } 
}