javascript - 如何从具有`Provider`上下文的同一组件调用`connect`来导入redux状态?
问题描述
我曾经将Provider
上下文包裹在我的顶级 React 组件周围:App
. 然后我决定将上下文直接移动到,ReactDOM.render
以便我可以connect
在App
. 我想使用connect
,以便我可以使用加载器(LinearProgress
)作为我的应用程序中的顶级组件。loading
所以我将从道具导入并相应地显示一个加载器(loading
可以从一些内部组件切换)。
但是我不断收到此错误:
Warning: Cannot update during an existing state transition (such as within
使成为). 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();
解决方案
寻找你的一个组件,它试图改变渲染方法中的状态。你不能这样做:
render() {
this.setState({
...
});
return (...);
}
推荐阅读
- javascript - 从字符串中提取特定数据
- r - 如何在 R 中使用 mtext 函数修复文本
- python - 如何在textview中只打印蓝色字符
- reactjs - 如何将寄存器传递给 React Hook Forms Factory 组件?
- google-cloud-firestore - Firestore Rules with an Or operator - Billing Question -
- sql - SQL Server:获取日期范围和天数
- jquery - 轮询一个又一个功能,第二个功能未正确触发
- c# - WPF Core - App.config 中的连接字符串不起作用
- spring - jhipster细粒度授权,去掉基于ROLE的授权
- python - 缩放后Python matplotlib错误选择艺术家的事件