React - Redux 状态更新但未在组件中呈现

Question

我有一个组件 Details.js，我在 Select 下拉列表

中填充来自 4 个联赛的球队

根据团队 selected State.js 组件中的状态更新

问题是根据团队 selected，有时状态会在 State.js 中呈现，有时不会。

控制台中没有错误，redux 工具中的状态已正确更新。

我正在使用 https://www.api-football.com/ 来使用数据。

这里是相关代码

在reducers/index.js中我创建了一个初始状态

RECEIVE_LEAGUE
  league:[],

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

在actions/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中提供了重现案例here的demo（需要使用Google Chrome扩展CORS Unblock来请参阅或任何其他解除阻塞 CORS 的扩展）

要重现案例，例如 select 意甲联赛中的弗拉门戈，状态会更新，但不会在组件中呈现，但如果您 select 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))

React - Redux 状态更新但未在组件中呈现

React - Redux State update but not rendered in the component

javascript

reactjs

redux

codesandbox