エラー小道具の扱い方は？ （エラーモーダルが1回だけポップアップする）

Question

ユーザーが間違った認証情報でログインしようとすると「エラーモーダル」と表示されます。 nextProps.errorMsgが未定義であるかどうかを確認しています。エラーメッセージがある場合は、エラーモーダルを示します。

最初の試行でのみ動作します。また、 'Can not Find Account'からprops.errorMsgを ''またはundefinedに設定すると、componentWillReceivePropsが呼び出されなかったことがわかりました。ここで

componentWillReceiveProps(nextProps) { 
    // onAuthComplete Pass twice. so. it's 
    console.log('yo'); 

    console.log(nextProps.errorMsg); 
    if(nextProps.errorMsg) { 
     this._showModal(); <<- here 
    } 
    this.setState({isLoading:true}); 
    if (nextProps.hType==1 || nextProps.hType==2) { 
     nextProps.navigation.navigate('Feed'); 
     this.setState({ password: ''}) 
    } 
    } 

_hideModal =() => { 
    // empty error 
    this.props.emptyErrorMsg; 
    this.setState({ isModalVisible: false }); 
} 

あなたはコメントで指摘

export const emptyErrorMsg =() => ({ 
    type: EMPTY_ERROR_MSG 
}) 

Answer 1

私の減速

const INITIAL_STATE = { token: null, errorMsg: undefined } 
export default function(state = INITIAL_STATE, action) { 
    case AUTH_LOGIN_FAIL: 
     return { token: null, errorMsg: `Can't Find Account` }; 
    case EMPTY_ERROR_MSG: 
     return { ...state, errorMsg: undefined} 
} 

とアクションの私の抜粋である

this.props.emptyErrorMsg; 

と

this.props.emptyErrorMsg(); 

はどちらも関数emptyErrorMsgを実行します。
これはではなく、の場合です。

const yourFunction = this.props.emptyErrorMsg; 
yourFunction(); 
this.props.emptyErrorMsg(); 

this.props.emptyErrorMsg関数自体へのポインタを戻します。ここでの違いです。それは実行されません。この関数を定数に代入し、後で定数を実行することができます（yourFunction()）。

this.props.emptyErrorMsg()は、この機能を実行します。これはおそらく、あなたの関数_hideModal（）でやってみたかったものです。