React axios数据和多组件搜索
问题描述:
您好我正在使用axios来获取React中的JSON数据,问题是我无法在提取的数据中搜索。React axios数据和多组件搜索
我试图获取父组件中的数据,但请求是异步的,所以它首先加载子组件,然后提取数据。
下面是我的代码:
axios.get("/url.json")
.then(function(result) {
teams= result.data.teams
});
ReactDOM.render(
<div>
<App teams={teams}/>
</div>
,document.getElementById('app')
)
如果我取使用子组件如何保存搜索数据Axios公司内部的数据?即我需要在未经过滤的数据中搜索。
答
请求成功后调用ReactDOM.render
:我的意思是在axios的回调内部不在外面。
axios.get("/url.json")
.then(function(result) {
const teams= result.data.teams;
ReactDOM.render(
<div>
<App teams={teams}/>
</div>
,document.getElementById('app')
)
});
..... OR .....
最佳实践,您可以添加它处理它的componentDidMount这里面调用另一个层(超亲):
class Root extends React.Component {
constructor() {
super(...arguments);
this.state= {teams : []};
}
componentDidMount() {
axios.get("/url.json")
.then((result) => {
this.setState({teams: result.data.teams})
});
}
render() {
return (
<div>
<App teams={this.state.teams}/>
</div>
)
}
}
ReactDOM.render(
<Root />
,document.getElementById('app')
)
谢谢,但如果我使用父组件,那么不会在axios完成数据提取之前先渲染子组件? – murtazamzk
这就是为什么我使用'this.setState',因为'setState'重新呈现内容。试试吧然后我们来看看 –
我试过了,子组件不更新显示空列表,我用getInitialState从父项道具设置子组件状态。 – murtazamzk