mapStateToProps在最上面的元素中引起奇怪的警告？

Question

我最近在顶层元素中添加了一个mapStateToProps：如您所见，我有两个条件渲染可能会导致问题...

...是的，这主要是代码，据说setState由于某种原因引起了警告...

应用

  // ... snip ... inside React class
  render () {
    return (
      <div id='app_hold'>
        <F1Apex/>
        {this.props.App.current && <FastApp/>}
        {!this.props.App.current && <FaviconApp/>}          
      </div>
    )
  }
}


const mapStateToProps = state => {
  return {
    App: state.App
  }
}
const AppRedux = connect(mapStateToProps)(App);
ReactDOM.render(
  <Provider store={store}>
    <AppRedux></AppRedux>
  </Provider>
, document.getElementById('app'));

现在收到警告：

FastApp

import React from 'react';
import { connect } from 'react-redux';
import './FastApp.css';

class FastApp extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      greeting: 'Hello ',
      time: '00:00:00 AM',
      image: 'none'
    }
  }
  componentDidMount () {
    this.setImageAndGreet(); // calls setState()
    this.showTime();  // calls setState()
  }

  // ... snip 

  render () {} // uses this.state which was set by this.setState()

Answer 1

您可能正在setImageAndGreet或showTime方法中进行异步操作，然后更新状态。

问题是您的FastApp组件已挂载，启动异步方法，然后在解决承诺之前取消挂载，因为App.current的值在那时已变为false。

要解决此问题，您必须在componentWillUnmount的{​​{1}}方法中取消异步操作，或在父组件或redux中移动逻辑。

我建议阅读这篇有关如何cancel a fetch call in componentWillUnmount

的文章

编辑：这是取消setTimeout的方法：

FastApp

如果每秒使用componentDidMount() { // Timer declaration this.myTimer = setTimeout(() => { this.setState({ someState: 'someValue' }); this.myTimer = 0; }, 1000); }; componentWillUnmount() { // Cancel timer if exists if (this.myTimer) { clearTimeout(this.myTimer); this.myTimer = 0; } }; ，则必须改用setTimeout，例如：

setInterval