Question

我正在处理忘记的密码表单。当用户填写表单时 - 我想用谢谢消息替换表单，然后在5秒后将用户重定向到登录页面。我还想清空forgetData状态 - 以便用户可以返回到表单 - 或者刷新等...再次填写它。

我当前的代码看起来像这样 - 我试图在componentWillUnmount上取消该状态 - 但它无效。

<Redirect refresh='5' to='/login' >

^有可能吗？

忘记页面看起来像这样。

import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchForget } from '../../actions/forgotAction';

import { Row, Col } from 'antd';

// components
import ForgotPasswordSyncValidationForm from './ForgotPasswordSyncValidationForm'

// this is a class because it needs state
class ForgotPassword extends Component {

  constructor(props, context) {
    super(props, context);
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {    
    // console.log('this', this)
  }

  componentWillMount () {
    document.body.classList.add('screenbackground');
  }

  componentWillUnmount() {
    document.body.classList.remove('screenbackground');

    this.state = {
      forgotData: null
    }
  }

  submit(data) {
    this.props.fetchForget(data);
  }

  render() {

    // when the user has applied for a new password
    /*
    if(this.props.forgotData.isForgot){
      setTimeout(function() { 
        return <Redirect to='/login'/>;
      }.bind(this), 5000);
    }
    console.log(this.props.forgotData)
    */

    return (
      <div className="Page form-components dark">
        <h2>Forgot Password?</h2>        
        <Row>
          <Col xs={24} sm={24} md={10}>
            <p>A message here about what this forgot form is about</p>
          </Col>
          <Col xs={24} sm={24} md={24}>
              <Row>
                <Col xs={24} sm={24} md={6}>
                  {!this.props.forgotData.isForgot ? (
                     <ForgotPasswordSyncValidationForm onSubmit={this.submit} />
                  ) : (
                    <div>
                    <p>Thank you for filling in the forgot password form. We have generated a new password for you, please check your email.</p>
                      <Redirect to='/login'/>
                    </div>
                  )}
                </Col>
              </Row>
          </Col>
        </Row>
        <div className="shell" />
        <div className="screen-background forgot" />        
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    forgotData: state.forgot
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ fetchForget }, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ForgotPassword))

Answer 1

componentWillUnmount() {
    document.body.classList.remove('screenbackground');

    this.state = {
      forgotData: null
    }
}

您的问题是您正在设置本地状态。

function mapStateToProps(state) {
  return {
    forgotData: state.forgot
  };
}

在mount上，您的redux状态将映射到您的本地。因此，除非您专门将redux状态重置为null，否则在第一次提交后将保持相同的值。除非手动重置或页面刷新，否则Redux状态不会重置。

Answer 2

好的，这是怎么回事？所以当你去一个不同的页面或刷新 - 忘记页面卸载 - 这样做会清除forgetData状态.. - 但是如何重定向等延迟...

行动 // forgotAction.js

import axios from 'axios';

export const FETCH_FORGOT_SUCCESS = 'FETCH_FORGOT_SUCCESS'
export const FETCH_FORGOT_FAILURE = 'FETCH_FORGOT_FAILURE'
export const FETCH_FORGOT_CLEAR = 'FETCH_FORGOT_CLEAR'

export function forgotSuccess(response) {
  return {
    type: FETCH_FORGOT_SUCCESS,
    payload: response
  }
}

export function forgotFail(response) {
  return {
    type: FETCH_FORGOT_FAILURE,
    payload: response
  }
}

export function forgotClear() {
  return {
    type: FETCH_FORGOT_CLEAR,
    payload: null
  }
}


export function fetchForget(data) {
  let url = 'https://api.github.com/users/theoldcounty';
  return function (dispatch) {     
    axios.get(url)
      .then(function (response) {
        //console.log(response);
        dispatch(forgotSuccess(response));
      })
      .catch(function (error) {
        //console.log(error);
        dispatch(forgotFail(error));
      });
  }
}

// forgotReducer.js

import { FETCH_FORGOT_SUCCESS, FETCH_FORGOT_FAILURE, FETCH_FORGOT_CLEAR } from '../actions/forgotAction'

export function forgotReducer (state = {}, action) {
  //console.log('reducer FORGOT act', action)
  switch (action.type) {
    case FETCH_FORGOT_SUCCESS:
      return {...state, data: action.payload, isForgot: true};
    case FETCH_FORGOT_FAILURE:
      return {...state, data: action.payload, isForgot: false}; 
    case FETCH_FORGOT_CLEAR:
      return {...state, data: action.payload, isForgot: false}; 
    default:
      return {...state} 
  }
}

表格 // ForgotPassword.js

import React, { Component } from 'react'
import { withRouter, Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchForget, forgotClear } from '../../actions/forgotAction';

import { Row, Col } from 'antd';

// components
import ForgotPasswordSyncValidationForm from './ForgotPasswordSyncValidationForm'

// this is a class because it needs state
class ForgotPassword extends Component {

  constructor(props, context) {
    super(props, context);
    this.submit = this.submit.bind(this);
  }

  componentDidMount() {    
    // console.log('this', this)
  }

  componentWillMount () {
    document.body.classList.add('screenbackground');
  }

  componentWillUnmount() {
    document.body.classList.remove('screenbackground');

    console.log("CLEAR MY FORGOT STATE", this);
    this.props.forgotClear();
  }

  submit(data) {
    this.props.fetchForget(data);
  }

  render() {

    // when the user has applied for a new password
    /*
    if(this.props.forgotData.isForgot){

    }
    console.log(this.props.forgotData)
    */

    return (
      <div className="Page form-components dark">
        <h2>Forgot Password?</h2>        
        <Row>
          <Col xs={24} sm={24} md={10}>
            <p>A message here about what this forgot form is about</p>
          </Col>
          <Col xs={24} sm={24} md={24}>
              <Row>
                <Col xs={24} sm={24} md={6}>
                  {!this.props.forgotData.isForgot ? (
                     <ForgotPasswordSyncValidationForm onSubmit={this.submit} />
                  ) : (
                    <div>
                      <p>Thank you for filling in the forgot password form. We have generated a new password for you, please check your email.</p>
                      {/*<Redirect to='/login'/>*/}
                    </div>
                  )}
                </Col>
              </Row>
          </Col>
        </Row>
        <div className="shell" />
        <div className="screen-background forgot" />        
      </div>
    )
  }

}

function mapStateToProps(state) {
  return {
    forgotData: state.forgot
  };
}

function mapDispatchToProps(dispatch) {
 return bindActionCreators({ fetchForget, forgotClear }, dispatch);
}

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ForgotPassword))

Reactjs - 在x秒后重定向并重置状态

2 个答案: