_This2 在调度动作时不是函数错误

Question

背景

我正在处理一个非常常规的代码块，我在我的应用程序中多次创建了动作和缩减器。我现在正在设置身份验证，并且有两个基于路由 / & /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);

Answer 1

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

import "../Login/login";

Answer 2

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

_This2 在调度动作时不是函数错误

_This2 not a function error when dispatching action

javascript

reactjs

redux-thunk

redux-actions

背景

问题

容器导入

JSX

发送代码

动作

减速器

已修订

登录组件