1

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 ファイルには render 関数のみがあり、それが返されます

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

ユーザーコンポーネントを呼び出します。User ファイルはほぼ同じです。

UserView.js ファイルで、スーパーエージェントを使用して AJAX リクエストを作成します

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().

なんで?エラーは、子を通じて親の状態を操作しようとしていることにあると思います。

4

1 に答える 1