如何在提交表單後反應原生？

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。 我無法做到。你們有誰可以說可能的方式？

在按一下按鈕，我已經通過了以下內容：

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

Answer 1

你減速generateOTPSuccess沒有訪問您的組件的this.props

有3種方式，我知道要做到這一點， OTP_GENERATE_SUCCESS（和OTP_GENERATE_FAIL）操作必須更改某個狀態，以便您可以將該狀態傳遞給您的組件，並在您的組件發出this.props.navigation.navigate（'OtpVerify'）調用時發現更改（在componentWillUpdate ）

第二種方法是將回調傳遞給動作創建者。

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

，並更改generateOTPSuccess到

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

第三種方式是返回自許的獲取和在組件中處理它

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

並改變signInByPhone返回承諾

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

Answer 2

使用OTP_GENERATE_SUCCESS和OTP_GENERATE_FAIL行動，改變有效載荷值或登錄狀態添加錯誤，所以你可以說狀態傳遞給您的組件，併發出在組件的componentWillReceiveProps的this.props.navigation.navigate('OtpVerify')通話方法。

比如你有一個登錄終極版比

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) 

和你的減速將有邏輯類似的東西在不同的動作，它會更新狀態以下列方式

// 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});