mapStateToProps вызывает странное предупреждение в самом верхнем элементе?

Question

Я недавно добавил mapStateToProps в свой элемент верхнего уровня: как вы можете видеть, у меня есть два условных рендеринга, которые могут вызывать проблему ...

... да ТАК, в основном это код, предположительно setState вызывает предупреждение по какой-то причине ...

App

  // ... 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 за это время изменилось на ложное.

Чтобы решить эту проблему, вы должны отменить асинхронные операции в componentWillUnmount методе FastApp или переместить логику вродительский компонент или в приставке.

Рекомендую прочитать этот пост о том, как отменить вызов выборки в componentWillUnmount

Редактировать: Вот как отменить setTimeout:

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 вместо этого, например:

componentDidMount() {
    // Timer declaration
    this.myTimer = setInterval(() => {
      this.setState({ someState: 'someValue' });
    }, 1000);
  };

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