[英]Writing a function inside a functional component in react
In my application, I have written a function under a functional component and it doesn't work. 在我的应用程序中,我已经在功能组件下编写了一个函数,但是它不起作用。 It says, function is not defined no-undef.
它说,函数没有定义为un-undef。 But I have written same kind of code in my previous project.
但是我在先前的项目中编写了相同类型的代码。 What am I doing wrong here?
我在这里做错了什么? If I convert this to a class component, this works fine.
如果我将其转换为类组件,则可以正常工作。 Is it possible to write a code like this?
是否可以编写这样的代码? Or do I have to change it to a class component?
还是我必须将其更改为类组件?
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);
Define with const onLogoutClick
, and you do not need this
keyword when calling it. 使用
const onLogoutClick
定义,并且在调用它时不需要this
关键字。
bind
is also unnecessary when you are already using arrow function for lexical binding. 当您已经使用箭头功能进行词法绑定时,
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
You got some syntax error: function declaration onLogoutClick
must be started with const
or let
and the stateless component is just a function, so you don't need this
when calling it. 你有一些语法错误:函数声明
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);
this is not available when using functional component. 使用功能组件时不可用。 It is working when using class component because this is available.
使用类组件时,它可以正常工作。
change this 改变这个
onClick={() => this.onLogoutClick().bind(this)}>
to 至
onClick={onLogoutClick()}>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.