javascript - 在 reactjs 中处理多个 ajax 调用

Question

我的 React 组件中有以下代码。

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            userOrganizations: users,
        });
    })
}

上面的代码启动了两个 ajax 调用，当响应被检索到时，它会更新组件的状态，从而导致组件的重新渲染。

我的问题是，当收到第一个响应时，组件完美呈现，然后当第二个响应到来时，先前呈现的组件从 DOM 中消失。我猜想当第二个响应更新状态时，没有引用之前的响应状态。

如何管理多个 ajax 调用，以便在单个组件中进行多个调用？我在这里做错了什么。

Answer 1

由于您将两个 ajax 调用的响应存储到同一个 state 变量中，因此您面临着这个问题。

你需要做类似的事情

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            users: users,
        });
    })
}

organizations & user 存储在单独的状态变量中。