React + axios 异步调用

Question

我正在使用 axios 来获取有关 componentDidMount 生命周期方法的一些数据。该调用最初在同一个文件中，因此我可以更新 this.setState({members})。但是我想将逻辑抽象到一个单独的文件中以保持代码干净。

我将逻辑拆分为一个新文件并开始使用 axios async await 模式。然而，React 似乎并没有等待我的 axios 调用完成。我浏览了文档和几篇文章，但似乎找不到问题。任何提示表示赞赏！

PS：我使用 create react app 作为基础并添加了 dns mock： https://github.com/hapijs/isemail/issues/26

队卡文件

import React from "react";
import { Icon } from "office-ui-fabric-react/lib/Icon";
import { PrimaryButton } from "office-ui-fabric-react/lib/Button";
import TeamCardLogo from "./teamCardLogo/teamCardLogo";
import TeamCardPersona from "./teamCardPersona/teamCardPersona";
import { GetGroupMembers } from "../../HttpRepositories/graphRepository";

class TeamCard extends React.Component {
    state = {
        members: ""
    };

    componentDidMount() {
        let members = GetGroupMembers(this.props.id, 5);
        console.log("members", members);

        this.setState({ members });
    }

    render() {
        let members = "";

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

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

        return (
            <article className="team-card-wrapper">
                <header className="team-card-wrapper__header">
                    <TeamCardLogo
                        className="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>Leden: {this.props.memberCount}</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>
        );
    }
}

export default TeamCard;

单独获取请求文件：

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

export async function GetGroupMembers(groupId, numberOfMembers) {
    // we initiate a new token, to be sure that it didn't expire.

    let graphToken = getGraphToken();

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

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

    console.log("returning data", response.data.value);
    return response.data.value;
}

日志截图：

Answer 1

您在这里缺少await：let members = await GetGroupMembers(this.props.id, 5); 和componentDidMount必须声明为async。