2

我有一个组件League.js，其中有 4 个包含联盟团队详细信息的框。

团队详细信息来自此 API =>https://www.api-football.com/demo/api/v2/teams/league/${id}

当我单击每个联赛框时，我正在组件中填充下拉列表Details.js

每当我单击每个联赛框以便在team_id名为. 为此，我向此端点发出呼叫请求 =>League.jsStat.jshttps://www.api-football.com/demo/api/v2/statistics/${league}/${team}

所以我需要传递league_id和作为一个参数，我可以正确地得到两个值，但是我在如何传递每个联赛的球队team_id第一名方面做错了。team_id

这些是步骤，我只放了相关代码。我正在创建firstTeamStats我正在调度的状态

在我的行动中 => index.js

export const RECEIVE_FIRST_TEAM_STATS = "RECEIVE_FIRST_TEAM_STATS";

export const receivedFirstTeamStats = json => ({
  type: RECEIVE_FIRST_TEAM_STATS,
  json: json
});



.get(`https://www.api-football.com/demo/api/v2/teams/league/${id}`)
.then(res => {
  let teams = res.data.api.teams;
  dispatch(receivedFirstTeamStats(teams[0].team_id));
})

在我的reducer => index.js 

case RECEIVE_FIRST_TEAM_STATS:
  return {
    ...state,
    firstTeamStats: action.json,
    isTeamsDetailLoading: false
  };

在我的 League.js 组件中

import {getTeamsStats} from "../actions";

const mapStateToProps = state => ({
  firstTeamStats: state.firstTeamStats
});

const mapDispatchToProps = {
  getStats: getTeamsStats,
};

const onClick = (evt, id, firstTeamStats) => {
  evt.preventDefault();
  getDetail(id); \\  get the team names in the Detail.js component
  getStats(id, firstTeamStats); \\ get the state value for the first team in the dropdown in Detail.js component
};

<a href={`#${item.league_id}`} onClick={(e) => onClick(e, item.league_id, firstTeamStats)}

现在firstTeamStats在onclick上面的方法中正确返回了第一支球队的状态值，但不是现有联赛的状态值，而不是我点击的那个我想要的值。

但是我可以在Details.js组件中正确获取此内容，我已将其放在{firstTeamStats}演示中，在那里我复制了我的案例 => https://codesandbox.io/s/romantic-solomon-6e0sb（使用 CORS Unblock Chrome 扩展程序查看）

所以问题是，我怎样才能在方法中{firstTeamStats} 正确传递我的联盟第一的状态在哪里？League.jsonclickgetStats(id, firstTeamStats){firstTeamStats}team_id

4

1 回答 1

1

每当您进行 API 调用时，它都是一个异步事件。在下一行使用它的响应之前，您应该始终等待。

所以在里面getDetail()，你正在做一个 API 调用。但是您尚未将此方法声明为异步。因此，您无需等待它完成，而是在下一行中getStats()使用旧数据调用方法。这就是为什么您的应用程序总是比您的 DOM 事件落后的原因。

  • 一种方法是使用async|await并从函数返回 API 响应，而不是使用调度。

  • 您还可以在获取 api 响应后调用内部，而不是在事件内部调用getTeamsStats()它 。getTeamsDetailById()OnClick()

const onClick = (evt, id, firstTeamStats) => { evt.preventDefault(); getDetail(id); \\ this is an async api call. you should have used await here. getStats(id, firstTeamStats); \\ It will execute before the new stats are fetched };

在 Stats.js 中，您不应该严格验证这些字段以显示统计信息……这些只是数字……有时也可以为0。所以请删除这些检查。

if (
     teamsStatsWinHome &&
     teamsStatsWinAway &&
     teamsStatsDrawHome &&
     teamsStatsDrawAway &&
     teamsStatsLoseHome &&
     teamsStatsLoseAway
   ) {

我有您的应用程序的工作实例...检查下面。 https://codesandbox.io/s/charming-dewdney-zke2t

如果你需要帮助，请告诉我。

于 2020-03-23T10:26:11.730 回答