Блог

Я пытаюсь добиться выхода пользователя из системы после окончания обратного отсчета, извините, потому что я новичок в react, который все еще учится, в любом случае это мой код. Большое вам спасибо за вашу помощь, я действительно ценю это. Выдает ошибку с надписью TypeError: this.props.onLogout не является функцией 🙂

Мой код:

  import React, { Component } from 'react';
import Countdown from "react-countdown";
import {
  Redirect,
} from 'react-router-dom';
import { logoutUser } from '../../../actions/authActions';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';


export class OnlineOrders extends Component {
 
  onLogout = (e) => {
    e.preventDefault();
    this.props.logoutUser();
  };

  render() {
 
    
    const renderer = ({ days, hours, minutes, seconds, completed }) => {
      if (completed) {
        this.props.onLogout();
        return <>
          <Redirect to='/billing/plans' />
        
        </>;
      } else {
        return (
          <span>
            {days}:{hours}:{minutes}:{seconds}
          </span>
        );
      }
    };

    return (
      <>
          <div className='note primary'>
            You have <strong><Countdown date={Date.now()   5000} renderer={renderer} /></strong>  remaining on your free trial.
                <a href='/billing/plans'> Activate Now</a> to stay alive!
              </div>
      </>
    );
  };
}

OnlineOrders.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
};

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

export default connect(mapStateToProps, { logoutUser })(OnlineOrders);
 

Похоже, вам нужно правильно вызвать onLogout .

 if (completed) {
  this.onLogout();
  return <Redirect to='/billing/plans' />;
} else {
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
}
 

Примечание: вы можете напрямую вызвать обратный вызов из props и сохранить объявление функции.

 if (completed) {
  this.props.logoutUser();
  return <Redirect to='/billing/plans' />;
} else {
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
}
 

На самом else деле это тоже лишнее, его можно удалить.

 const renderer = ({ days, hours, minutes, seconds, completed }) => {
  if (completed) {
    this.props.logoutUser();
    return <Redirect to='/billing/plans' />;
  }
  return (
    <span>
      {days}:{hours}:{minutes}:{seconds}
    </span>
  );
};