Действие React-Redux - Ожидается, что прослушиватель onClick будет функцией, вместо этого он получит значение типа object. - PullRequest
Новая
       8

Действие React-Redux - Ожидается, что прослушиватель onClick будет функцией, вместо этого он получит значение типа object.

0 голосов
/ 25 мая 2020

У меня возникли проблемы с правильным вызовом действия «выйти из системы» в моем компоненте панели навигации. Действие нужно для сброса состояния; однако, когда я пытаюсь вызвать его, как показано в следующем коде, это не функция, а возвращаемый объект. Я даже попытался вызвать его с помощью функции стрелки в свойстве onClick, но получаю то же сообщение об ошибке.

Navbar. js

import React, { Fragment } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { logout } from '../../actions/auth';

const Navbar = ({ auth: { isAuthenticated, loading } }, logout) => {
  const authLinks = (
    <ul>
      <li>
        <a onClick={logout} href='#!'>
          <i className='fas fa-sign-out-alt'></i>{' '}
          <span className='hide-sm'>Logout</span>
        </a>
      </li>
    </ul>
  );

  const guestLinks = (
    <ul>
      <li>
        <Link to='/#!'>Developers</Link>
      </li>
      <li>
        <Link to='/register'>Register</Link>
      </li>
      <li>
        <Link to='/login'>Login</Link>
      </li>
    </ul>
  );

  return (
    <nav className='navbar bg-dark'>
      <h1>
        <Link to='/'>
          <i className='fas fa-code'></i> DevConnector
        </Link>
      </h1>
      {!loading && (
        <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
      )}
    </nav>
  );
};

Navbar.propTypes = {
  logout: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
};

const mapStateToProps = state => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { logout })(Navbar);

Я вызываю следующее действие. .. 

export const logout = () => dispatch => {
  dispatch({ type: LOGOUT });
};

1 Ответ

1 голос
/ 25 мая 2020

logout - опора. Свойства передаются внутри объекта, который является первым аргументом функционального компонента. Там неуместный }, что делает logout вторым аргументом. 

const Navbar = ({ auth: { isAuthenticated, loading } }, logout) => {
                                                     ^^

Возможно, вы имели в виду: 

const Navbar = ({ auth: { isAuthenticated, loading }, logout }) => {
...