Reactjs React ComponentMount未获得异步映像。如果在更改页面之前未完成，如何取消请求？

我是一个新的反应来自一个角度的背景。最近，我正在构建一个页面，在该页面中显示所有需要从MicrosoftGraphAPI获取图像的卡。调用的返回类型是base64字符串。我不想把它放到redux中，因为它会使我的开发工具不可读

所以，我决定使用this.isMounted模式（）在componentDidMount生命周期钩子中进行异步调用。然而，问题是出于某种原因，这不会取消我所做的异步调用。我不确定我是否犯了错误，或者是否需要取消订阅，而不是检查组件是否已安装。但是我找不到任何关于如何处理这个问题的信息

任何帮助都将不胜感激

我的团队卡代码：

import React from "react";
import { Icon } from "office-ui-fabric-react/lib/Icon";
import TeamCardLogo from "./teamCardLogo/teamCardLogo";
import TeamCardPersona from "./teamCardPersona/teamCardPersona";
import { GetGroupMembers } from "../../HttpRepositories/graphRepository";
import { FormattedMessage } from "react-intl";
import Fade from "react-reveal/Fade";
import { Modal } from "office-ui-fabric-react/lib/Modal";
import reactAppInsights from "react-appinsights";
import TeamModal from "./teamModal/teamModal";

类TeamCard扩展了React.Component{

    state = {
        members: "",
        modelIsOpen: false
    };

    async componentDidMount() {
        let members = await GetGroupMembers(this.props.id);

        if (this.state.member !== "error") {
            this.setState({ members });
        }
    }

    _openModal = id => {
        this.setState({ modelIsOpen: true });
    };

    _closeModal = () => {
        this.setState({ modelIsOpen: false });
    };

    render() {
        let members = "";

        if (
            typeof this.state.members !== "undefined" &&
            this.state.members.length > 0 &&
            this.state.members !== "error"
        ) {
            members = this.state.members.map((member, i) => {
                if (i < 5) {
                    return (
                        <div className="team-card-body__personas-wrapper-person" key={i}>
                            <TeamCardPersona
                                className="team-card-body__personas-wrapper-person"
                                member={member}
                                key={i}
                            />
                        </div>
                    );
                }
            });
        } else {
            members = <div className="no-members-spacer" />;
        }
        let favouriteIcon = "";

        this.props.isFavorite === true
            ? (favouriteIcon = <Icon iconName="FavoriteStarFill" />)
            : (favouriteIcon = <Icon iconName="FavoriteStar" />);

        return (
            <React.Fragment>
                {/* <Fade bottom delay={this.props.delay} appear={true}> */}
                <article
                    className="team-card-wrapper"
                    onClick={() => this._openModal(this.props.id)}
                >
                    <header className="team-card-wrapper__header">
                        <TeamCardLogo
                            injectClass="team-card-wrapper__header-photo"
                            teamId={this.props.id}
                        />
                        <div className="team-card-wrapper__header-options-wrapper">
                            <div className="header-options__icon-group">
                                <div className="header-options__group-type">
                                    <Icon iconName="LockSolid" />
                                </div>
                            </div>

                            <div className="header-options__icon-group">
                                <div className="header-options__favourite">{favouriteIcon}</div>
                            </div>
                        </div>
                    </header>

                    <section className="team-card-body">
                        <h1>{this.props.title}</h1>
                        <h2>
                            {" "}
                            <FormattedMessage
                                id="teamcard.memberCount"
                                defaultMessage="Leden"
                            />
                            :{this.state.members.length}
                        </h2>

                        <div className="team-card-body__personas-wrapper">{members}</div>

                        <p className="description">{this.props.description}</p>

                        {/* <div className="team-card-body__join-button-wrapper">
                            <PrimaryButton text="Lid worden" />
                        </div> */}
                    </section>
                </article>
                {/* </Fade> */}
                <Modal
                    titleAriaId={this._titleId}
                    subtitleAriaId={this._subtitleId}
                    isOpen={this.state.modelIsOpen}
                    onDismiss={this._closeModal}
                    isBlocking={false}
                    containerClassName="team-modal-wrapper"
                >
                    <TeamModal
                        teamId={this.props.id}
                        title={this.props.title}
                        description={this.props.description}
                        favorite={this.props.isFavorite}
                        members={this.state.members}
                        closeModal={this._closeModal}
                    />
                </Modal>
            </React.Fragment>
        );
    }
}

export default TeamCard;

---

在调用

setState

之前，而不是在启动请求之前，您希望检查

\isMounted

是否仍然为

true

async componentDidMount() {
  this._isMounted = true;

  let logo = await getImage(
    `https://graph.microsoft.com/v1.0/groups/${this.props.teamId}/photo/$value`
  );

  if (this._isMounted && logo !== "error") {
    this.setState({ groupImage: logo });
  }
}

import { getGraphToken } from "../adalConfig";
import axios from "axios";

export const GetGroupMembers = async groupId => {
    // we initiate a new token, to be sure that it didn't expire.
    let graphToken = getGraphToken();

    try {
        let response = await axios({
            url: `https://graph.microsoft.com/v1.0/groups/${groupId}/members?$select=id,displayName`,
            method: "GET",
            headers: { Authorization: "Bearer " + graphToken }
        });

        if (response.status != 200 && response.status != 204) {
            return "error";
        }

        return await response.data.value;
    } catch (error) {
        return "error";
    }
};

    export const getImage = async url => {
        // we initiate a new token, to be sure that it didn't expire.
        let graphToken = getGraphToken();

        try {
            let response = await axios({
                url: url,
                method: "get",
                responseType: "blob",
                headers: { Authorization: "Bearer " + graphToken }
            });

            if (response.status != 200 && response.status != 204) {
                return "error";
            }

            var urlCreator = window.URL || window.webkitURL;
            var imageUrl = urlCreator.createObjectURL(response.data);

            return await imageUrl;
        } catch (error) {
            return "error";
        }
    };

async componentDidMount() {
  this._isMounted = true;

  let logo = await getImage(
    `https://graph.microsoft.com/v1.0/groups/${this.props.teamId}/photo/$value`
  );

  if (this._isMounted && logo !== "error") {
    this.setState({ groupImage: logo });
  }
}