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

我有一个组件

League.js

，其中有4个框包含联赛球队的详细信息

团队详细信息来自此API=>

https://www.api-football.com/demo/api/v2/teams/league/${id}

当我点击每个联赛框时，我正在填充我的组件

Details.js中的下拉列表

每当我点击
League.js
中的每个联赛框，以便在名为
Stat.js
的组件中进行正确的计算时，我不会在下拉列表中获得
team\u id
。为此，我向该端点发出调用请求=>
https://www.api-football.com/demo/api/v2/statistics/${league}/${team}

因此，我需要传递
联盟id
和
团队id
作为参数，我可以正确获得这两个值，但在如何传递每个联盟的团队的第一个
团队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
  };

在my 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)}

从“./actions”导入{getTeamsStats}；
常量mapStateToProps=状态=>({
firstTeamStats:state.firstTeamStats
});
const mapDispatchToProps={
getStats:getTeamsStats，
};
const onClick=（evt、id、firstTeamStats）=>{
evt.preventDefault（）；
getDetail（id）；\\n获取Detail.js组件中的团队名称
getStats（id，firstTeamStats）；\\n在Detail.js组件的下拉列表中获取第一个团队的状态值
};
（使用CORS解锁铬扩展查看）

所以问题是，我如何在
League.js中通过
onclick
方法将
{firstTeamStats}
正确地传递给请求
getStats（id，firstTeamStats）
其中
{firstTeamStats}
是我在联盟的第一个
团队id
的状态？
无论何时进行API调用，这是一个异步事件。在下一行使用它的响应之前，您应该一直等待

因此，在
getDetail（）
中，您正在进行一个API调用。但您尚未将此方法声明为async。因此，您不必等待它完成，在下一行中，您将使用旧数据调用
getStats（）
方法。这就是为什么你的应用程序总是比你的DOM事件落后一步的原因


一种方法是使用
async | wait
并返回API响应
从函数，而不是使用分派

获取api响应后，还可以在
getTeamsDetailById（）
中调用
getTeamsStats（）
，而不是在
OnClick（）中调用它
事件


const onClick=（evt、id、firstTeamStats）=>{
evt.preventDefault（）；
getDetail（id）；\\n这是一个异步api调用。您应该在此处使用wait。
getStats（id，firstTeamStats）；\\n它将在获取新统计数据之前执行
};

在Stats.js中，您不应该严格验证这些字段以显示统计信息。。。这些只是数字。。有时也可以是0。所以请去掉这些支票

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

我有一个你的应用程序的工作实例。。。检查下面。

如果您需要什么，请告诉我。
codesandbox不工作@koalaUse CORS Unblock Chrome extension tosee@Koala7.. 我已经把我的答案贴在下面了。一定要检查一下，让我知道