![](/img/trans.png)
[英]React/Redux fails when a Select option is selected the first time but not the second
[英]React - Populating First Select Option with Redux State
我有組件League.js
,其中有 4 個包含聯賽球隊詳細信息的框。
球隊詳細信息來自此 API => https://www.api-football.com/demo/api/v2/teams/league/${id}
當我點擊每個聯賽框時,我會在我的組件Details.js
填充下拉Details.js
我不會得到team_id
一線隊的下拉只要我在每個聯賽框中單擊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)}
現在,上面的onclick
方法中的firstTeamStats
正確返回了第一支球隊狀態值,但是是現有聯賽的值,而不是我點擊的那個是我想要的。
但是,我可以在Details.js
組件中正確獲取此信息,我已將{firstTeamStats}
放在演示中,在那里我復制了我的案例 => https://codesandbox.io/s/romantic-solomon-6e0sb (使用 CORS Unblock Chrome 擴展程序查看)
所以問題是,我怎樣才能在League.js
中的onclick
方法中正確傳遞{firstTeamStats}
到請求getStats(id, firstTeamStats)
其中{firstTeamStats}
是我的聯盟第一個team_id
的狀態?
每當您進行 API 調用時,它都是一個異步事件。 在下一行使用它的響應之前,您應該始終等待。
因此,在getDetail()
,您正在進行 API 調用。 但是您尚未將此方法聲明為異步方法。 所以你不用等待它完成,在下一行你用舊數據調用getStats()
方法。 這就是為什么您的應用程序將始終比 DOM 事件落后一步的原因。
一種方法是使用async|await
並從函數返回 API 響應,而不是使用 dispatch。
您還可以在獲取 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
有什么需要的話請告訴我。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.