Redux setState 在组件卸载后调用

Question

我正在构建一个包含 3 个主要组件的 React/Redux 应用程序 - 我正在尝试循环使用的说明、StoryFeed 和测验 4 轮（3 + 1 次练习）。

我有一个时钟组件（嵌套在 StoryFeed 中 组件），并且它设置为在计时器时移动到测验组件 达到零。但是，它似乎在调用 setState 之后 卸载并给出无限错误

警告：setState(...): 只能更新挂载或挂载 零件。这通常意味着您在未安装的设备上调用了 setState() 零件。这是无操作的。

我不知道如何防止这种情况。下面是Clock 组件的代码：

import React from 'react'
import PropTypes from 'prop-types'

import ReactInterval from 'react-interval'

class Clock extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
      timed: props.timed,
      counting: true
    }

    this.tick = this.tick.bind(this)
  }

  reset() {
    this.setState({
      counting: true,
      count: this.state.count + 1
    })

  }
  componentWillUnmount() {
    this.setState({ counting: false }, () => this.props.complete())
  }
  tick() {
    const { count, timed, counting } = this.state
    if (count + 1 > timed && counting) {
      this.componentWillUnmount()
    } else {
      this.reset();
    }
  }

  render() {
    return (
      <div className="clock alert alert-warning">
        <ReactInterval
          timeout={1000}
          enabled={this.props.timed > 1 && this.state.count < this.props.timed}
          callback={() => this.tick()}
        />
        <span>{this.state.timed - this.state.count}</span>
      </div>
    )
  }
}

Clock.propTypes = {
  timed: PropTypes.number,
  complete: PropTypes.func
}

export default Clock

这是父组件StoryFeed 代码：

import React from 'react'
import Marquee from './Marquee'
import * as stories from '../stories'
import Clock from './Clock'
import { chunk, now } from '../utils'
import PropTypes from 'prop-types'

class StoryFeed extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      text: stories.example,
      currentTest: 1,
      count: 0,
      timed: props.timed,
      selected: []
    }
    this.storyLoad.bind(this)
    this.select = this.select.bind(this)
    this.isSelected = this.isSelected.bind(this)
  }

  componentDidMount() {
    document.body.classList.add('mosaic-full-screen')
    this.storyLoad();
  }

  componentWillUnmount() {
    document.body.classList.remove('mosaic-full-screen')


  }

  select(id) {
    if (this.state.selected.find(s => s.id == id)) return

    this.setState({
      selected: [...this.state.selected, { id, time: now() }]
    })
  }

  isSelected(id) {
    return this.state.selected.find(j => j.id === id)
  }

  storyLoad(state) {
    switch (this.state.currentTest){
      case 1:
      this.setState({text: stories.example});
        console.log(this.state.currentTest)
      break;
      case 2:
      this.setState({text: stories.colleagues});
      break;
      case 3:
      this.setState({text: stories.aroomforthenight});
      break;
      case 4:
      this.setState({text: stories.thepromotion});
      break;
    }
  };



  reset() {
    this.clock &&
      this.clock.reset(4, () => {
        this.setState({
          counting: true
        })
      })
  }


  render() {
    const { enterAnswers, id, show, timed } = this.props
    return (
      <div className="story">
        <div className='container'>
          <Marquee text={this.state.text.join(' - ')} loop={false} hoverToStop={true} />
        </div>
        <div className="controls">
          {timed && (
            <Clock
              timed={timed}
              complete={() => enterAnswers(id, this.state.selected, now())}

            />
          )}
        </div>
      </div>

      )
    }

}
StoryFeed.propTypes = {
  timed: PropTypes.number,

  enterAnswers: PropTypes.func,
  id: PropTypes.number,
  show: PropTypes.oneOf(['window', 'jigsaw'])
}
export default StoryFeed

这个问题的其他答案似乎是针对具体情况的

Answer 1

您可以在卸载时设置方法属性，然后仅在未设置此属性时更新状态。例如：

componentWillUnmount() {
  this.unmounted = true;
}

...

someMethod() {
  if (!this.unmounted) this.setState{...}
}

Answer 2

解决此问题的一种方法如下

class X extends Component {
  mounted = false 
  ss = (...args) => {
    this.mounted && this.setState(...args)
  }
  componentDidMount(){
    this.mounted = true 
  }
  componentWillUnMount(){ // or componentDidUnmount
    this.mounted = false 
  }
}

现在您可以使用this.ss 而不是this.setState，或者您可以在设置状态之前检查this.mounted

我不确定这是最好的解决方案，但它确实解决了问题