[英]Rendering Ajax request in React-Router Children
我在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>
調用用戶組件。 用戶文件幾乎相同。
在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().
為什么? 我認為錯誤在於我試圖通過孩子操縱父母的狀態。
問題是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>
)
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.