在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> 
    ) 
    } 
}