React - Redux 狀態更新但未在組件中呈現

Question

我有一個組件Details.js ，我在選擇下拉列表中填充來自 4 個聯賽的球隊

根據選擇的團隊， State.js組件中的狀態會更新

問題在於，根據所選團隊的不同，有時狀態會在State.js呈現，有時則不會。

控制台中沒有錯誤，並且在 redux 工具中狀態已正確更新。

我正在使用https://www.api-football.com/來使用數據。

這里是相關代碼

在reducers/index.js我創建了一個初始狀態

RECEIVE_LEAGUE
  league:[],

case RECEIVE_LEAGUE:
  return {...state, leagueId: action.json};

在動作/index.js

export const receivedLeague = json => ({
  type: RECEIVE_LEAGUE,
  json: json
});

我在getTeamsDetailById(id)添加了一個調度

dispatch(receivedLeague(id));

在Details.js組件中

我在頂部添加了狀態leagueId

並編輯了我的selectTeamStat函數

  const [selectedOption, setSelectedOption] = useState('');

  const selectTeamStat = (evt) => {
     const { value } = evt.target;
     setSelectedOption(value)
     getStats(leagueId, value);
  };

我已經提供了在codesandbox重現的情況下演示在這里（這是必須使用谷歌Chrome擴展CORS阻止看到或任何其它分機疏通CORS）

例如，要重現這種情況，請在意甲中選擇 Flamengo，狀態會更新，但不會在組件中呈現，但如果您選擇 Botafogo，則會呈現狀態。 為什么？

Answer 1

if (
  teamsStatsWinHome !== null && // maybe you also need to add `typeof object === 'undefined'`
  teamsStatsWinAway !== null &&
  teamsStatsDrawHome !== null &&
  teamsStatsDrawAway !== null &&
  teamsStatsLoseHome !== null &&
  teamsStatsLoseAway !== null
)

為避免重復，您也可以使用，但也許第一種方法更容易閱讀

const isNullOrUndefined = (object) => object === null || typeof object === 'undefined';

if(![
  teamsStatsWinHome,
  teamsStatsWinAway,
  teamsStatsDrawHome,
  teamsStatsDrawAway,
  teamsStatsLoseHome,
  teamsStatsLoseAway,
].some(isNullOrUndefined))