Рендеринг запроса 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 я сделать запрос AJAX с 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> 
    ) 
    } 
} 

Но это не работает, и это дает мне ошибку:

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