父母删除的子组件仍然会获得商店更改事件

Question

tl; dr:mridgway在这里描述的相同问题:isMounted不足以知道你是否可以setState

我有一个像这样的组件层次结构:

PhasesList
- Phase
  - PhaseHeader
- Phase
  - PhaseHeader

还有一个PhaseStore,它维护一个阶段列表及其详细信息.

在所有三个组件中,我监听PhaseStore更改并根据更改更新状态(重新呈现).例如,如果用户在PhaseHeader中更改阶段名称,则会触发操作,存储更新并发出更改事件.该更改事件将传播到PhaseList,Phase和PhaseHeader,并使用实际名称值进行呈现.

有一个问题,我可以删除一个阶段.此操作在PhaseStore中处理,其中相位从列表中删除并发出更改事件(如在其他情况下).此事件由所有组件处理,从上到下(因为所有组件都监听商店更改).

因此,在PhasesList中,渲染新的阶段集,而不删除一个阶段.但是,移除的阶段组件仍然会收到更改事件,而PhaseHeader也会收到更改事件.

在这两个组件中,在相变处理程序中我使用setState.我得到的信息是这样的:

警告:setState(...):只能更新已安装或安装的组件.这通常意味着您在已卸载的组件上调用了setState().这是一个无操作.

我发现人们使用isMounted来检查组件是否仍在DOM中.此方法现已弃用.

我怎样才能以适当的流量方式解决这个问题？设计我的组件及其相互通信有什么问题？

Answer 1

通常,您应该使用生成容器组件的React Redux.它已经过大量优化,比手动代码使用更快setState(),并且特别为您提到的案例提供保护.

否则你可以这样做:

componentDidMount() {
  this.unsubscribe = store.subscribe(this.handleChange.bind(this));
}

componentWillUnmount() {
  this.unsubscribe();
  this.unsubscribe = null;
}

handleChange() {
  if (!this.unsubscribe) {
    return;
  }

  this.setState(/* ... */);
}