React + axios async call

Question

Я использую axios для получения некоторых данных о методе жизненного цикла componentDidMount.Вызов был первоначально в том же файле, и поэтому я мог обновить this.setState ({members}).однако я хотел абстрагировать логику в отдельный файл, чтобы сохранить код в чистоте.

Я разбил логику на новый файл и начал использовать шаблон axios async await.однако кажется, что React не ждет, пока мой вызов axios завершится.Я просмотрел документы и несколько постов, но, похоже, не могу найти проблему.любые советы приветствуются!

PS: в качестве базы я использовал приложение create activ и добавил макет dns: https://github.com/hapijs/isemail/issues/26

Файл Teamcard

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.