Как вызвать `connect` из того же компонента, который имеет контекст` Provider` для импорта избыточного состояния?

Question

Раньше у меня был Provider контекст, обернутый вокруг моего верхнего компонента React: App.Затем я решил переместить контекст непосредственно в ReactDOM.render, чтобы я мог использовать redux connect в App.Я хочу использовать connect, чтобы я мог использовать загрузчик (LinearProgress) в качестве верхнего компонента в моем приложении.Поэтому я буду импортировать loading из реквизита и соответственно отображать загрузчик (loading может быть переключен из некоторого внутреннего компонента).

Однако я продолжаю получать эту ошибку:

Warning: Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

Страница по-прежнему отображается нормально, но у меня есть вышеупомянутая ошибка в консоли.Я проверил строку, которая вызывает ошибку, является следующей (внутри App):

{loading && <LinearProgress color='secondary'/>}

Если я удаляю строку, то об ошибках не сообщается в консоли.Почему условное отображение загрузчика внутри App вызывает ошибку?

Это код компонента App:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import LinearProgress from '@material-ui/core/LinearProgress';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import SearchAppBar from './components/layout/MaterialHeader.js';
import AppInfo from './components/appOperations/AppInfo.js';
import About from './components/layout/About.js';

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import constants from './constants';

class App extends Component {
  render() {
    const { loading } = this.props;
    return (
      <Router>
        <div className="App">
          {loading && <LinearProgress color='secondary'/>}
          <SearchAppBar/>
          <Switch>
            <Route exact path="/" />
            <Route exact path={constants.CLIENT_ROUTES.APP} component={AppInfo}/>
            <Route exact path="/about" component={About}/>
          </Switch>
        </div>
      </Router>
    );
  }
}

App.propTypes = {
  loading: PropTypes.bool.isRequired
};

const mapStateToProps = state => ({
  loading: state.app.loading
});

export default connect(mapStateToProps, null)(App);

Это код родительского и самого верхнегокомпонент App:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
import App from './App';
import MaterialBlueTheme from './components/layout/MaterialBlueTheme.js';
import * as serviceWorker from './serviceWorker';
import store from './store.js';

ReactDOM.render(
  <Provider store={store}>
    <MuiThemeProvider theme={MaterialBlueTheme}>
      <App />
    </MuiThemeProvider>
  </Provider>
  , document.getElementById('root')
);

serviceWorker.unregister();

Answer 1

Найдите один из ваших компонентов, который пытается изменить состояние в методе рендеринга.Вы не можете сделать это:

render() {
  this.setState({
    ...
  });

  return (...);
}