Reactjs - rediriger après x secondes et réinitialiser l'état

Question

Je travaille sur un formulaire de mot de passe oublié. Lorsque l'utilisateur remplit le formulaire - je veux remplacer le formulaire par un message de remerciement, puis rediriger l'utilisateur vers la page de connexion après 5 secondes. Je veux également vider l'état ForgotData - de sorte qu'un utilisateur puisse retourner au formulaire - ou actualiser etc .. pour le remplir à nouveau ..

mon code actuel ressemble à ceci - j'ai essayé d'annuler le état sur componentWillUnmount - mais cela ne fonctionne pas.

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

^est quelque chose comme ça possible?

la page oubliée ressemble à ceci.

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

Votre problème est que vous définissez l'état local.

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

Sur le montage, votre état redux sera mappé à votre locale. Donc, à moins que vous ne réinitialisiez spécifiquement votre état de redux à null, vous continuerez à obtenir la même valeur après le premier envoi. L'état Redux ne se réinitialise pas sauf réinitialisation manuelle ou actualisation de la page.

Answer 2

Ok comment est-ce? Donc, quand vous allez à une autre page ou rafraîchissez - la page démontages oublié l'- et ce faisant CLEARS l'état forgotData .. - mais comment au sujet du retard dans la réorientation etc ..

l'action // 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} 
    } 
} 

la forme // 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))