TypeError：this.props.dispatch不是函数

Question

我想通过单击“登录”或“注册”按钮显示一个模块化窗口，并且出现以下错误（TypeError：_this.props.dispatch不是函数）。 一个项目中的相同代码通常可以在另一个项目中工作。

import React from "react";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { openModal } from "../modal/index";
import Login from "../auth/Login";
import Register from "../auth/Register";

class Navbar extends React.Component {
  static propTypes = {
    dispatch: PropTypes.func.isRequired,
  };
  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.register = this.register.bind(this);
   }

  login() {
    this.props.dispatch(
      openModal({content: <Login />,title: "Login"}));
  }
  register() {
    this.props.dispatch(
      openModal({content: <Register />,title: "Register"}));
  }

  render() {
      const guestLinks = (
      <ul className="navbar-nav ml-auto">
        <li className="nav-item">
          <button
            className="m-1 btn-sm btn btn-outline-primary mt-1"
            onClick={this.register}>Register</button>
        </li>
        <li className="nav-item">
          <button
            className="m-1 btn-sm btn btn-outline-primary mt-1"
            onClick={this.login}>Login</button>
        </li>
      </ul>
    );

    return (
      <nav className="navbar navbar-expand-sm navbar-light bg-light mb-4">
        <div className="container">
          <Link className="navbar-brand" to="/">
            Domras
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#mobile-nav">
            <span className="navbar-toggler-icon" />
          </button>

          <div className="collapse navbar-collapse" id="mobile-nav">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item">
                <Link className="nav-link" to="/profiles">
                  Driver
                </Link>
              </li>
            </ul>
           </div>
        </div>
      </nav>
    );
  }
}
  const mapStateToProps = state => ({
  auth: state.auth,
});

 export default connect(mapStateToProps)(Navbar);

Answer 1

欢迎使用堆栈溢出。

如果一切正确，那么您应该不会有问题。

该错误消息表明dispatch属性不是函数，而是-否则，您应该在控制台中得到警告。

为您节省一些代码的提示...使用如下所示的粗箭头功能，这些功能会自动绑定到this ，因此您无需在构造函数中绑定它们：

  constructor(props) {
    super(props);
// No longer needed
    // this.login = this.login.bind(this);
    // this.register = this.register.bind(this);
   }

  login = () => {
    this.props.dispatch(
      openModal({content: <Login />,title: "Login"}));
  }
  register = () => {
    this.props.dispatch(
      openModal({content: <Register />,title: "Register"}));
  }