在 React-Router 子级中呈现 Ajax 请求

Rendering Ajax request in React-Router Children

本文关键字:Ajax 请求 React-Router      更新时间:2023-09-26

我在React-Router和AJAX请求方面遇到了问题。

这是索引.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 请求

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

为什么?我认为错误在于我试图通过孩子来操纵父母的状态。

问题是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>
    )
  }
}