在 React-Router 子级中呈现 Ajax 请求
Rendering Ajax request in React-Router Children
我在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>
)
}
}
相关文章:
- ajax请求的顺序总是不同的
- 从ajax请求中获取javascript对象
- Ajax请求文档就绪会导致jquery加载缓慢
- MockJax没有在JavaScript应用程序中发送对我AJAX请求的响应
- 正在传递JSONP标头's数据参数到另一个文件中的AJAX请求
- JavaScript代码未正确检查ajax请求
- "日期“;AJAX请求返回的类型值未定义
- 在等待ajax请求时显示微调器并禁用页面
- 跨域ajax请求
- Ajax请求返回空的数据字符串,但首先得到了正确的数据
- Javascript-如何让脚本与Ajax请求的数据一起运行
- ajax请求成功,但可以'我看不到我的数据
- 如何将给定的curl命令复制为jquery ajax请求
- 为什么我能够从javascript控制台发送跨域ajax请求
- 一台特定计算机的Ajax请求数据未定义/失败
- 获取ajax请求的请求头
- 原型Ajax请求参数为嵌套json
- 可以't从AJAX请求中筛选数据
- jQuery Mobile Collapse上的AJAX请求
- 暂停函数执行流程,直到ajax请求完成