未捕获的TypeError:this.props。***在从redux容器调用函数时不是React-redux app中的函数

时间:2017-10-23 10:25:24

标签: javascript reactjs redux containers

我有一个实施了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();

我认为这是一个常见的错误,我到处都看,代码中似乎没有明显的缺陷。不确定问题出在哪里。

2 个答案:

答案 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);
}