_This2不是调度操作时的函数错误

Question

背景

我正在处理非常例行的代码，我在整个应用程序中多次创建了动作和简化器。我现在正在设置身份验证，并且有两个基于路由/和/register的容器。

问题

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

Uncaught TypeError: _this2.propsregisterHandler is not a function

我很困惑为什么在道具和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);

Answer 1

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

import "../Login/login";

Answer 2

问题出在我将组件加载到容器中的原因。我不确定确切的原因，但是我正在使用命名的导入import {Login} from ".../path"将组件导入容器，而应该是import Login from ".../path"。