React - 使用 Redux 状态填充第一个 Select 选项

Question

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

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

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

每当我按顺序点击 League.js 中的每个联赛框时，我都不会在下拉列表中获得 第一队 的 team_id在名为 Stat.js 的组件中进行正确的计算。为此，我向此端点发出调用请求 => https://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 方法中 returns 正确地第一支球队状态值但是现有联赛而不是我点击的那个是我想要的.

但是我可以在 Details.js 组件中正确地得到这个，我在演示中放了 {firstTeamStats} 在那里我重现了我的案例 => https://codesandbox.io/s/romantic-solomon-6e0sb （使用 CORS Unblock Chrome 扩展查看 )

所以问题是，我怎样才能在方法 onclick 的 League.js 中将 {firstTeamStats} 正确传递给请求 getStats(id, firstTeamStats)，其中 {firstTeamStats} 是我第一个 team_id 联盟的状态？

Answer 1

无论何时进行 API 调用，它都是一个异步事件。在下一行中使用其响应之前，您应该始终等待。

因此在 getDetail() 内，您正在拨打 API 电话。但是您还没有将此方法声明为异步的。所以你不是在等待它完成，而是在下一行中用旧数据调用 getStats() 方法。这就是为什么您的应用程序总是比您的 DOM 事件落后一步。

一种方法是使用 async|await 和 return API 响应从函数中，而不是使用 dispatch.
您还可以在获取 api 响应后在 getTeamsDetailById() 中调用 getTeamsStats()，而不是在 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

如果您需要什么，请告诉我。

React - 使用 Redux 状态填充第一个 Select 选项

React - Populating First Select Option with Redux State

javascript

get

reactjs

redux

codesandbox