使用反應導航與終極版的反應天然的「不能現有日期過渡期間更新」

Question

我剛開始學習反應本地和終極版。我正在嘗試實現身份驗證方案。我正在使用react-navigation。

import { authenticate } from './../actions'; 

const Component = (props) => { 
    const { dispatch, user } = props; 

    // user comes from state (using mapStateToProps) 

    let phone = ''; 
    let password = ''; 

    if (user.errors != null) { 
    alert(user.errors); 
    } 

    if (user.authenticated) { 
     dispatch(NavigationActions.navigate({ routeName: 'LoggedIn' })); 
    } 

    async function onLogin() {  
    dispatch(authenticate(phone, password)); 
    } 

    return (
    <View> 
     <TextInput 
     style={{height: 40, width: '100%', borderColor: 'gray', borderWidth: 1, marginTop: 10}} 
     placeholder="(xxx) xxx-xx-xx" 
     keyboardType={'phone-pad'} 
     onChangeText={(value) => phone = value} 
     value={phone} 
     /> 
     <TextInput 
     style={{height: 40, width: '100%', borderColor: 'gray', borderWidth: 1, marginTop: 10}} 
     placeholder="Пароль" 
     onChangeText={(value) => password = value} 
     value={password} 
     /> 
     <Button 
     onPress={onLogin} 
     title="Continue" 
     /> 
    </View> 
); 
} 

這裏是驗證行動

export function authenticate(phone, password) { 
    return async dispatch => { 
    dispatch(authenticating()); 
    let response; 
    try { 
     response = await Api.authenticate(phone, password); 
    } 
    catch (e) { 
     dispatch(authenticateFailure(e.error)); 
     return; 
    } 
    dispatch(authenticateSuccess(response.token, response.payload)); 
    }; 
}; 

時authenticate動作發出的，成功驗證用戶身份所以基本上，我想用戶重定向到下一屏（LoggedIn）。但重定向後，我得到這個錯誤：

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount.

我猜問題是，以前的組件中斷，當它被重定向到下一個組件（的loggedIn）被渲染，因爲每一個調度觸發重新呈現。

如何導航到另一個屏幕上的動作被分派後？我可以以某種方式派發一個動作而不觸發重投嗎？

Answer 1

嘗試所有這一切都移動到

componentWillReceiveProps(nextProps) { 
    // check props you want to use as execution trigger 
} 

＃

const { dispatch, user } = props; 

// user comes from state (using mapStateToProps) 

let phone = ''; 
let password = ''; 

if (user.errors != null) { 
    alert(user.errors); 
} 

if (user.authenticated) { 
    dispatch(NavigationActions.navigate({ routeName: 'LoggedIn' })); 
} 

async function onLogin() {  
    dispatch(authenticate(phone, password)); 
} 

你可能需要調整一些常量使用內部渲染方法