反応ネイティブでフォームを送信した後のナビゲート方法は？ここ

Question

は、自分の行動の作成者である：

export const signInByPhone = ({ phone })=>{ 
console.log('All props : ', this.props); // no props are coming. ?? 
    return (dispatch) => {   
     fetch(`${API_URL}`, { 
      method: 'POST', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({ 
       phone_no : phone 
      }) 
     }) 
     .then((res) =>res.json()) 
     .then((jsonRes) =>{ 
      if (jsonRes.code === 200) { 
       console.log('json response code1 : ', jsonRes); 
       // go to verification screen                  
       generatOTPSuccess(dispatch,jsonRes); 
      } 
      else { // reset otp sending screen 
       console.log('json response code2 : ', jsonRes); 
      } 
     }) 
     .catch(res => generatOTPFail(dispatch, res)); 
    };  
} 

ヘルパーメソッド：私が達成したい何

const generatOTPSuccess = (dispatch, res) =>{ 
    dispatch({ 
     type: 'OTP_GENERATE_SUCCESS', 
     payload: res 
    }); 
    this.props.navigation.navigate('OtpVerify'); 
    // Error : payload: TypeError: Cannot read property 'navigation' of 
      undefined at generatOTPSuccess         
} 

、OTPが正常に生成したら、それはVerifyScreenに移動しなければなりません。 私はできない。誰かが可能な方法であると言うことができますか？ボタンのクリックで

、私は次のように合格している：あなたの減速generateOTPSuccessは、あなたのコンポーネントのthis.propsへのアクセス権を持っていない

onButtonPress(){   
     const {phone}=this.props; 
    console.log(phone, " : this.props : ",this.props); // all props r coming 
     this.props.signInByPhone({ phone });   
    } 

Answer 1

これを行うには、私の知っている3つの方法がありますが、 OTP_GENERATE_SUCCESS（およびOTP_GENERATE_FAIL）アクションは、その状態をコンポーネントに渡すことができるように、いくつかの状態を変更する必要があります。変更が表示されたらコンポーネントのthis.props.navigation.navigate（ 'OtpVerify'）コールを発行します（componentWillUpdate ）

2番目の方法は、このようなアクション作成者にコールバックを渡すことです。

class Example extends Component 
{ 
    constructor() 
    { 
     .... // constructor code 
     this.onSuccess = this.onSuccess.bind(this); 
     // this makes sure that this points to the component when it's ran in the action creator 

    } 

    .... // component code 

    onSuccess() 
    { 
     this.props.navigation.navigate('OtpVerify'); 
    } 

    handleSubmit(e, loginDetails) 
    { 
     this.signInByPhone(loginDetails, this.onSuccess); 
    } 
} 

その後、私は第三の方法は、フェッチからの約束を返すことですするonSuccessコールバック

export const signInByPhone = ({ phone }, onSuccess)=>{ 
    return (dispatch) => {   
     fetch(`${API_URL}`, { 
      method: 'POST', 
      headers: { 
       'Accept': 'application/json', 
       'Content-Type': 'application/json', 
      }, 
      body: JSON.stringify({ 
       phone_no : phone 
      }) 
     }) 
     .then((res) =>res.json()) 
     .then((jsonRes) =>{ 
      if (jsonRes.code === 200) { 
       console.log('json response code1 : ', jsonRes); 
       // go to verification screen                  
       generatOTPSuccess(dispatch,jsonRes); 
       if(typeof(onSuccess) === 'function') 
       { 
        onSuccess(); 
       } 
      } 
      else { // reset otp sending screen 
       console.log('json response code2 : ', jsonRes); 
      } 
     }) 
     .catch(res => generatOTPFail(dispatch, res)); 
    };  
} 

を取ると、

const generatOTPSuccess = (dispatch, res) =>{ 
    dispatch({ 
     type: 'OTP_GENERATE_SUCCESS', 
     payload: res 
    }); 
} 

にgenerateOTPSuccessを変更するには、アクションの作成者を変更したいとコンポーネント内で処理する

class Example extends Component 
{ 
    constructor() 
    { 
     .... // constructor code 
    } 

    .... // component code 

    onSuccess() 
    { 
     this.props.navigation.navigate('OtpVerify'); 
    } 

    onFail() 
    { 
     ... // handle a fail 
    } 


    handleSubmit(e) 
    { 
     this.signInByPhone(loginDetails).then(this.onSuccess, this.onFail); 
    } 
} 

そして、あなたはあなたのコンポーネントにその状態を渡し、あなたのコンポーネントのcomponentWillReceivePropsでthis.props.navigation.navigate('OtpVerify')コールを発行することができるようにペイロード値を変更したり、ログインの状態でエラーを追加する約束

export const signInByPhone = ({ phone }, onSuccess)=>{ 
    return (dispatch) => {   
     return fetch(`${API_URL}`, { 
     .... 
    } 
    .... 
} 

Answer 2

使用OTP_GENERATE_SUCCESSとOTP_GENERATE_FAILアクションを返すようにsignInByPhoneを変更方法。例えば

あなたは

componentWillReceiveProps(newProps) { 
    if (newProps.loggedIn) { 
     this.props.navigation.navigate('OtpVerify'); 
    } else if (!newProps.attempting && newProps.error) { 
     showMessage(newProps.error); 
    } 
    } 


const mapStateToProps = (state) => { 
    return { 
    loggedIn: !!state.login.payload, 
    error: state.login.error, 
    attempting: state.login.attempting 
    } 
}; 

const mapDispatchToProps = (dispatch) => { 
    return {} 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen) 

よりログインReduxのを持っているし、あなたの減速が異なるアクションにそのような論理の何かを持っているだろう、それはエラーメッセージによると、次のよう

// login attempts 
const attempt = (state, action) => 
    state.merge({attempting: true}); 

// successful logins 
const success = (state, action) => 
    state.merge({attempting: false, error: null, payload: action.payload}); 

// login failure 
const failure = (state, action) => 
    state.merge({attempting: false, error: action.error});