[英]React - Redux State update but not rendered in the component
我有一个组件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,则会呈现状态。 为什么?
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))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.