1

背景

我正在编写一段非常常规的代码，我在整个应用程序中多次创建了动作和减速器。我现在正在设置身份验证，并根据路由/&加载两个容器/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);
4

2 回答 2

0

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

于 2018-07-06T12:29:27.530 回答
0

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

import "../Login/login";
于 2018-07-04T04:57:09.353 回答