正确卸载 React 组件

debugcn 发表于 Dev

m_callens

问题：为什么在组件不再由其父级渲染后会抛出此警告？我是否缺少卸载该组件所需要做的事情，而不仅仅是过滤作为 props 向下传递到组件层次结构的商店状态？

我经常看到这种情况，但解决方案通常涉及从组件取消订阅 redux 存储；然而，这个组件并没有连接到商店，只是顶级容器。

该remove操作只是过滤存储状态以删除负责当前组件的数组元素。
该refresh动作目前只是在子组件中模拟 UI 动画事件。
仅当我Feed在调用refresh操作后删除组件时才会抛出警告

警告：setState(...)：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了 setState()。这是一个无操作。请检查 Feed 组件的代码。

// @flow
// Feed.js

import React, { Component } from 'react'
import type { FeedType, FeedState } from '../../utils/types'
import { remove, refresh } from '../../actions/redux-actions'
import RssEventList from '../containers/RssEventList'

const cardColors: Array<string> = ['red', 'orange', 'olive', 'green', 'blue', 'yellow']

export default class Feed extends Component {
  props: FeedType
  state: FeedState

  constructor(props: *) {
    super(props)

    this.state = {
      reloading: false
    }
  }

  refresh() {
    this.setState({ reloading: true })
    setInterval(() => this.setState({ reloading: false }), 4000)
    this.props.dispatch(refresh(this.props.link))
  }

  remove() {
    this.props.dispatch(remove(this.props.link))
  }

  render() {
    const color: string = cardColors[Math.floor(Math.random() * cardColors.length)]

    return (
      <div className={`ui ${color} card`}>
        <div className="content">
          <div className="ui header">
            {this.props.title}
            <a className="source link" href={this.props.link} target="_blank">
              <i className="linkify right floated icon"></i>
            </a>
          </div>
          <div className="meta">
            {this.props.description}
          </div>
        </div>
        <div className="content">
          <RssEventList reloading={this.state.reloading} events={this.props.feed} />
        </div>
        <div className="extra content">
          <span className="left floated" onClick={() => this.refresh()}>
            <i className="refresh icon"></i>
            Refresh
          </span>
          <span className="right floated" onClick={() => this.remove()}>
            <i className="cancel icon"></i>
            Remove
          </span>
        </div>
      </div>
    )
  }
}

如果有帮助，这里是组件层次结构图：

App (connected to store)
|- Header
|- FilterBar
|- FeedList
   |- Feed
      |- RssEventList
         |- RssEvent
   |- AddCard

达米安·勒鲁

问题是您没有在组件上存储间隔以在组件卸载时将其删除。因此，即使在卸载组件后，间隔仍将继续被调用。您需要使用以下命令将其删除clearInterval()：

export default class Feed extends Component {
  refresh() {
    this.myInterval = setInterval(() => this.setState({ reloading: false }), 4000)
  }

  componentWillUnmount() {
    clearInterval(this.myInterval);
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。