Ошибка типа: 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"}));
  }