"Cannot update during existing date transition" 在 react-native 中使用 react-navigation 和 redux

Question

刚开始学习react-native和redux。我正在尝试实施身份验证方案。我正在使用 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));
}

您可能需要调整您在 render 方法中使用的一些常量

"Cannot update during existing date transition" 在 react-native 中使用 react-navigation 和 redux

"Cannot update during existing date transition" using react-navigation with redux in react-native

reactjs

react-native

react-redux

react-navigation