gpt4 book ai didi

javascript - React 状态获取 "corrupted"

转载 作者:行者123 更新时间:2023-12-03 00:31:13 27 4
gpt4 key购买 nike

我正在开发一个简单的 React.JS 前端部分。

我本质上有一个用于历史数据的浏览 SPA。该设计有一堆过滤器,我需要一次填充一个过滤器,从逻辑层次结构中的顶部过滤器开始。

我做了类似的事情:

  componentWillMount() {
if (!this.props.advertisers) {
this.props.loadAdvertisers();
}
}

加载广告商数组后,我将其映射到选择组件的选项(使用 react-select),将选择设置为列表中的第一项并加载下一个列表 - 事件

据我所知,最好的方法仍然是 componentWillReceiveProps() 并且我有点困惑如何以不同的方式完成此操作,因为 componentWillReceiveProps正在逐步淘汰。

我的代码如下:

componentWillReceiveProps(nextProps) {
if (nextProps.advertisers && !this.props.advertisers) {
const advertiser = nextProps.advertisers[0];
this.setState({
advertiser: {
value: advertiser['id'],
label: advertiser['name']
}
});
nextProps.loadCampaigns(advertiser['id']);
}
// if campaigns list changed, reload the next filtered array
if (nextProps.campaigns && this.props.campaigns !== nextProps.campaigns) {
...
}

这工作得很好,直到我决定添加一个加载指示器。我映射了状态的 loading 属性,例如对于campaigns,它通过this.props.campaignsLoading公开,然后执行:

return (this.props.campaignsLoading || this.props...Loading || ...) ? 
<ProgressIndicator> : <MainContentPanel>

现在的问题是,我的状态在 componentWillReceiveProps() 内没有正确设置。

该项目正在使用@rematch,我最初尝试使用@rematch/loading插件,当问题发生时,我认为该插件以某种方式做错了。然后,我手动映射了 loading 属性,并添加了另外两个 dispatch 来手动设置加载 flag

所有 Prop 都已正确设置/取消设置,但我的状态未设置并且没有任何效果。有什么建议吗?

最佳答案

当你这样做时

if (nextProps.advertisers && !this.props.advertisers) {

您没有比较下一个和上一个 Prop 。 “this.props.advertisers”可能已经设置,因此您永远不会进入 setState 行。尽管使用 componentWillReceiveProps 不再是推荐的方法( You Probably Don't Need Derived State ),但您可能想要做的大致是:

if (nextProps.advertisers && nextProps.advertisers !== !this.props.advertisers) {

关于javascript - React 状态获取 "corrupted",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53863631/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com