时间戳

首页 > 解决方案 > 倒计时反应后如何使用户注销

reactjs - 倒计时反应后如何使用户注销

问题描述

我试图在倒计时结束后让用户注销，我很抱歉，因为我只是反应的新手，还在学习，无论如何这是我的代码。非常感谢你的帮助，我真的很感激。有一个错误提示 TypeError: this.props.onLogout is not a function :)

我的代码：

 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);

标签： reactjs

解决方案

看起来你需要onLogout正确调用。

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

旁注：您可以直接从道具调用回调并保存函数声明。

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>
  );
};

推荐阅读