javascript - ReactJS 中的 componentDidMount 内多个 api 调用中的多个设置状态

Question

我是 React 新手，尝试在 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
    }
}

Answer 1

您应该在一次更新中设置状态，同时更新两个值。否则，您将指示 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 请求新渲染之前完成第一次渲染。