React-Redux 操作 - 预期的"onClick"侦听器是一个函数，而不是获得"对

Question

我很难在导航栏组件中正确调用"注销"操作。该操作用于重置状态;但是，当我尝试调用它(如下面的代码所示(时，它不是一个函数，而是返回的对象。我什至尝试使用 onClick 属性中的箭头函数调用它，但我收到相同的错误消息。

导航栏.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 });
};

Answer 1

logout是一个道具。props 作为对象内部传递，对象是函数组件的第一个参数。有一个错位的}，这使得logout成为第二个论点。

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

也许你的意思是：

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