[英]Writing a function inside a functional component in react
在我的应用程序中,我已经在功能组件下编写了一个函数,但是它不起作用。 它说,函数没有定义为un-undef。 但是我在先前的项目中编写了相同类型的代码。 我在这里做错了什么? 如果我将其转换为类组件,则可以正常工作。 是否可以编写这样的代码? 还是我必须将其更改为类组件?
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { logoutUser, clearCurrentProfile } from '../../actions';
const Navbar = props => {
const { isAuthenticated, user } = props.auth;
onLogoutClick = e => {
e.preventDefault();
props.clearCurrentProfile();
props.logoutUser();
}
const authLinks = (
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/feed">
Post Feed
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/dashboard">
Dashboard
</Link>
</li>
<li className="nav-item">
<img
className="rounded-circle"
style={{ width: '25px' }}
src={user.avatar}
alt={user.name}
/>
<button
type="button"
className="link-button nav-link"
onClick={() => this.onLogoutClick().bind(this)}>
Logout
</button>
</li>
</ul>
);
const guestLinks = (
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/register">
Sign Up
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/login">
Login
</Link>
</li>
</ul>
);
return (
<nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
<div className="container">
<Link className="navbar-brand" to="/">
DevConnector
</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav">
<span className="navbar-toggler-icon"></span>
</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">
Developers
</Link>
</li>
</ul>
{isAuthenticated ? authLinks : guestLinks}
</div>
</div>
</nav>
);
};
Navbar.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
auth: state.auth
});
const mapDispatchToProps = dispatch => ({
logoutUser: bindActionCreators(logoutUser, dispatch),
clearCurrentProfile: bindActionCreators(clearCurrentProfile, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
使用const onLogoutClick
定义,并且在调用它时不需要this
关键字。
当您已经使用箭头功能进行词法绑定时, bind
也是不必要的。
const Navbar = props => {
// ...
const onLogoutClick = e => { // use consts or let
e.preventDefault()
props.clearCurrentProfile()
props.logoutUser()
}
const authLinks = (
// ...
<button
type="button"
className="link-button nav-link"
onClick={onLogoutClick} // no need 'this' keyword
>
...rest of your stuffs
你有一些语法错误:函数声明onLogoutClick
必须启动const
或let
与无状态组件仅仅是一个函数,所以你不需要做this
调用它时。
import React from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { logoutUser, clearCurrentProfile } from '../../actions';
const Navbar = props => {
const { isAuthenticated, user } = props.auth;
const onLogoutClick = e => {
e.preventDefault();
props.clearCurrentProfile();
props.logoutUser();
}
const authLinks = (
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/feed">
Post Feed
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/dashboard">
Dashboard
</Link>
</li>
<li className="nav-item">
<img
className="rounded-circle"
style={{ width: '25px' }}
src={user.avatar}
alt={user.name}
/>
<button
type="button"
className="link-button nav-link"
onClick={onLogoutClick}>
Logout
</button>
</li>
</ul>
);
const guestLinks = (
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<Link className="nav-link" to="/register">
Sign Up
</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/login">
Login
</Link>
</li>
</ul>
);
return (
<nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4">
<div className="container">
<Link className="navbar-brand" to="/">
DevConnector
</Link>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav">
<span className="navbar-toggler-icon"></span>
</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">
Developers
</Link>
</li>
</ul>
{isAuthenticated ? authLinks : guestLinks}
</div>
</div>
</nav>
);
};
Navbar.propTypes = {
logoutUser: PropTypes.func.isRequired,
auth: PropTypes.object.isRequired
}
const mapStateToProps = state => ({
auth: state.auth
});
const mapDispatchToProps = dispatch => ({
logoutUser: bindActionCreators(logoutUser, dispatch),
clearCurrentProfile: bindActionCreators(clearCurrentProfile, dispatch)
});
export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
使用功能组件时不可用。 使用类组件时,它可以正常工作。
改变这个
onClick={() => this.onLogoutClick().bind(this)}>
至
onClick={onLogoutClick()}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.