我有一个实施了redux的反应应用程序,我收到此错误
未捕获的TypeError:this.props.updateDimensions不是函数
执行App.js时: -
class App extends Component {
componentDidMount() {
this.updateWindowDimensions();
window.addEventListener("resize", this.updateWindowDimensions);
}
componentWillUnmount() {
window.removeEventListener("resize", this.updateWindowDimensions);
}
updateWindowDimensions() {
this.props.updateDimensions(window.innerWidth, window.innerHeight);
}
render() { .....
AppContainer.js文件: -
import { connect } from "react-redux";
import App from "./App";
import { UPDATE_DIMENSIONS } from "../actions";
const mapStateToProps = (state, ownProps) => {
return {
screenWidth: state.screenSize.screenWidth,
screenHeight: state.screenSize.screenHeight
};
};
const mapDispatchToProps = (dispatch, ownProps) => {
return {
updateDimensions: (screenWidth, screenHeight) => {
dispatch({ type: UPDATE_DIMENSIONS, screenWidth, screenHeight });
}
};
};
const AppContainer = connect(mapStateToProps, mapDispatchToProps)(App);
export default AppContainer;
这是index.js,其中调用了AppContainer: -
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import { BrowserRouter as Router, Route } from "react-router-dom";
import "./index.css";
import AppContainer from "./App";
import registerServiceWorker from "./registerServiceWorker";
import "semantic-ui-css/semantic.min.css";
let store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<Router>
<Route component={AppContainer} />
</Router>
</Provider>,
document.getElementById("root")
);
registerServiceWorker();
我认为这是一个常见的错误,我到处都看,代码中似乎没有明显的缺陷。不确定问题出在哪里。
答案 0 :(得分:1)
想出来。
index.js中的: -
从“./App”;
导入AppContainer应该是
从“./AppContainer”导入AppContainer;
啊!如果React抛出一个错误,说“在./App.js中找不到AppContainer”,那就容易多了。
更新: -
我还通过添加以下内容修复了另一个错误: -
constructor(props) {
super(props);
this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
}
答案 1 :(得分:0)
我想你忘记了:
constructor(props) {
super(props);
}