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

Posted 2023-02-19

【中文标题】React - 使用 Redux 状态填充第一个选择选项

【英文标题】：React - Populating First Select Option with Redux State

【发布时间】：2020-07-01 23:07:26

【问题描述】：

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

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

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

当我点击League.js 中的每个联赛框以便在名为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 方法中正确返回了第一支球队的状态值，但不是现有联赛的值，而不是我点击的那个我想要的值。

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

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

【问题讨论】：

codesandbox 不工作@koala

使用 CORS Unblock Chrome 扩展查看

@Koala7.. 我已经在下面发布了我的答案。请检查并告诉我

【参考方案1】：

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

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

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

您还可以在获取 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

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