【问题标题】：_This2 not a function error when dispatching action_This2 在调度动作时不是函数错误
【发布时间】：2018-07-03 22:50:31
【问题描述】：

背景

我正在编写一段非常常规的代码，我在整个应用程序中多次创建了动作和减速器。我现在正在设置身份验证，并根据路由 / 和 /register 加载两个容器。

问题

我正在尝试调度一个动作，并执行一个简单的console.log("test")。我之前已经做过很多次了，事实上，我确实复制了一个容器并更改了分派动作名称的名称。一个容器可以工作，而另一个容器正在打我：

Uncaught TypeError: _this2.propsregisterHandler is not a function

我很困惑为什么它没有在 props 和 registerHandler 之间显示.

容器导入

import { register } from "../../store/actions/authentication";

JSX

 <div
  className="btn btn-primary col"
  onClick={() =>
    this.props.registerHandler(
      this.state.email,
      this.state.password
    )
  }
>
  Register
</div>

....

调度代码

const mapStateToProps = state => {
  return {};
};

const mapDisptachToProps = dispatch => {
  return {
    registerHandler: () => dispatch(register())
  };
};

export default connect(
  mapStateToProps,
  mapDisptachToProps
)(Register);

动作

import * as actionTypes from "./actiontypes";

export const register = () => {
  console.log("TEST");
  return { type: actionTypes.REGISTER };
};

减速器

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actiontypes.REGISTER: {
      console.log("you called the reducer");
      return state;
    }

修订

这里的代码不起作用，我总是得到错误，但是如果我在我的登录组件中调用相同的操作，它将起作用。

import React, { Component } from "react";
import { connect } from "react-redux";
import { registerUserToApp } from "../../store/actions/authentication";
import "../Login/login";

export class Register extends Component {
  state = {
    email: "",
    password: ""
  };

  render() {
    return (
      <div
        className="btn btn-primary"
        onClick={() => {
          this.props.registerUserToAppHandler();
        }}
      >
        Register
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDispatchToProps = dispatch => {
  return {
    registerUserToAppHandler: () => dispatch(registerUserToApp())
  };
};

export default connect(
  mapDispatchToProps,
  mapStateToProps
)(Register);

登录组件

import React, { Component } from "react";
import { connect } from "react-redux";
import Aux from "../../components/hoc/Aux";
import Logo from "../../assets/images/Logo.png";
import GoogleLogo from "../../assets/images/google.svg";
import {
  loginUser,
  loginUserWithGoogle,
  registerUserToApp
} from "../../store/actions/authentication";

import "./login.css";

export class Login extends Component {
  state = {
    email: "",
    password: ""
  };

  render() {
    const userNameChangeHandler = event => {
      this.setState({
        email: event.target.value
      });
    };

    const passworChangeHandler = event => {
      this.setState({
        password: event.target.value
      });
    };

    return (
      <Aux>
       ...
                    <div
                      className="btn btn-primary col"
                      onClick={() => {
                        this.props.loginUserHandler(
                          this.state.email,
                          this.state.password
                        );
                        this.props.registerUserToAppHandler();
                      }}
                    >
                      Sign In
                    </div>
                    ...
      </Aux>
    );
  }
}

const mapStateToProps = state => {
  return {};
};

const mapDisptachToProps = dispatch => {
  return {
    loginUserHandler: (email, password) => dispatch(loginUser(email, password)),
    registerUserToAppHandler: () => dispatch(registerUserToApp()),
    loginUserWithGoogleHandler: () => dispatch(loginUserWithGoogle())
  };
};

export default connect(
  mapStateToProps,
  mapDisptachToProps
)(Login);

【问题讨论】：

我不知道这是否是您的问题的原因，但是当您使用 registerHandler 时，您正在传递参数，但是当您定义函数时没有设置参数。
我试过你的代码，它可以正常工作。所以，问题应该出在我们在这里看不到的其他代码的某些部分。顺便说一句，它不是那么重要，但你有错字为mapDisptachToProps。但这不会影响代码，因为您在连接部分做了同样的错字。
我同意@devserkan，我无法重现问题
路由一定是有关系的，登录组件使用了同样的结构，我什至从那里调用了同样的动作，一切正常。
我添加了一个失败的示例组件和正在工作的登录组件。两者之间的唯一区别是路由

标签： javascript reactjs redux-thunk redux-actions

【解决方案1】：

我不能发表评论，但你不应该在导入样式时添加.css 扩展名吗？

import "../Login/login";

【讨论】：

【解决方案2】：

问题是由于我如何将此组件加载到我的容器中。我很确定确切的推理，但我使用命名导入 import {Login} from ".../path" 将我的组件导入到容器中，而它应该是 import Login from ".../path"。

【讨论】：