在React中的功能組件內部編寫函數

Question

在我的應用程序中，我已經在功能組件下編寫了一個函數，但是它不起作用。 它說，函數沒有定義為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);

Answer 1

使用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

Answer 2

你有一些語法錯誤：函數聲明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);

Answer 3

使用功能組件時不可用。 使用類組件時，它可以正常工作。

改變這個

onClick={() => this.onLogoutClick().bind(this)}>

至

onClick={onLogoutClick()}>