Reactjs - x秒後にリダイレクトして状態をリセットします。

Question

私はパスワードを忘れた形式で作業しています。ユーザーがフォームに記入したとき - 私はフォームに感謝のメッセージを置きたいと思って、5秒後にユーザーをログインページにリダイレクトします。 forgotData状態を空にして、ユーザーがフォームに戻ることができるようにするか、リフレッシュするなどして再度入力します。

私の現在のコードは次のようになります。 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 
    }; 
} 

マウント時に、あなたのredux状態はローカルにマップされます。したがって、あなたが特にあなたのredux状態をnullにリセットしない限り、最初のサブミット後も同じ値が得られます。 Redux状態は、手動リセットまたはページリフレッシュを行わないとリセットされません。

Answer 2

これはどのようにですか？したがって、別のページに移動するか、ページを更新すると、忘れたページがアンマウントされます。その際、forgotDataの状態はクリアされますが、リダイレクトの遅延はどうですか？

アクション // 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))