Question

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

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

PS：我使用create react应用程序作为基础，并添加了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

您在这里缺少NAME TYPE CLUSTER-IP EXTERNAL-IP PORT(S) istio-ingressgateway LoadBalancer 10.aa.bb.bb 35.aa.bb.cc 80:31380/TCP,443:31390/TCP,31400:31400/TCP,15011:31585/TCP,8060:31570/TCP,853:31552/TCP,15030:31762/TCP,15031:30685/TCP 52m：await和let members = await GetGroupMembers(this.props.id, 5);必须声明为componentDidMount。

React + axios异步调用

1 个答案: