componentDidMount中ReactJS中多个api调用中的多个集合状态
componentDidMount中ReactJS中多个api调用中的多个集合状态
提问于 2019-11-10 10:11:53
我是新的反应和尝试调用多个componentDidMount函数内的api调用。
我的代码是
componentDidMount() {
Promise.all([
axios.get(<url1>),
axios.get(<url2>)
]).then(([res1, res2]) => {
// call setState here
const users = res1.data.users;
this.setState({ users: users});
const banks = res2.data.banks;
this.setState({ banks: banks});
console.log("Users")
console.log(users) // It works
console.log("Banks")
console.log(banks) // It works
})
}
render() {
console.log(this.state.users.length) // Gives length
console.log(this.state.banks.length) // Gives undefined
return (
<div className='popup'></div>
)
}问题是在渲染函数中，第二状态banks长度未定义。
如何在componentDidMount中执行多个setstate操作。
任何帮助都是非常感谢的。
更新:解决了错误
constructor(props) {
super(props);
this.state = {
users: [],
//MISSING BANKS array
}
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-11-10 10:19:25
您应该在单个更新中设置状态，同时更新两个值。否则，您将指示React启动两种呈现，第一种将包含users值和banks的undefined值(取决于初始状态声明)。此呈现后将很快进行第二次传递，其中将定义状态值users和banks。
下面的示例应该在一个单独的呈现中根据需要工作。
Promise.all([
axios.get(<url1>),
axios.get(<url2>)
]).then(([res1, res2]) => {
// call setState here
const users = res1.data.users;
const banks = res2.data.banks;
this.setState({ users, banks });
});另一方面，如果对于某些奇怪的需求，实际上需要两个顺序的呈现，则可以使用setState的完成回调；例如下面的示例。
this.setState({ users }, () => {
this.setState({ banks });
});这将确保第一个呈现在通过setState请求新呈现之前已经完成。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58787619
复制相关文章
相似问题
腾讯云开发者
