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};

在 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的情况（必须使用Google Chrome扩展程序CORS Unblock来查看或解开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))

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

1 个答案: