Error and warning: "Cannot update during an existing state transition an error", using react-native-router-flux and redux-form Field

[OrianeInMoon]

bug

using react-native-router-flux with <Field /> from redux-form, I run into warnings and an error.

versions

"react": "16.0.0-alpha.12",
"react-native": "0.46.4",
"react-native-router-flux": "^4.0.0-beta.16",
"react-redux": "^5.0.5",
"redux": "^3.7.2",
"redux-form": "^7.0.1",

expected behavior

No warnings and no error

actual behavior

errors

• a warning:

Warning: Cannot update during an existing state transition (such as within renderor 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 tocomponentWillMount`

• an error:

Uncaught RangeError: Maximum call stack size exceeded

observations

• The problem came after passing mapStateToProps to ConnectedRouter:

const ConnectedRouter = connect(mapStateToProps, null, mergeProps)(Router);

• in Cannot update during an existing state transition #2063

I just did a little digging. Would you mind explaining why does the component need to be stateless?, I suspect that the <Field /> component is not stateless and so, not compatible with the react-native-router-flux render.

@necsoft resolved the problem switching from

class App extends Component {

to

const App = () => {...}

• in react-router/issues/4713

updating could be solution, or was a solution at this time and with react-router.

step to reproduce

<ConnectedRouter />
  <Scene contentComponent={PageHome}/>
    <MyReduxForm />
      <Field />

• <ConnectedRouter />

const ConnectedRouter = connect(mapStateToProps, null, mergeProps)(Router);

• <Scene />

<Scene
  key="pagehome"
  component={PageHome}
  title="Home"
/>

• <Page />

const PageHome = ({ onSubmit }) => {
  return (
    <View>
      <MyReduxForm onSubmit={onSubmit} />
    </View>
  );
};

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

const mapDispatchToProps = (dispatch) => {
  return {
    onSubmit: () => console.log('submit')),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(PageAccount);

• <Form />

import { Field, reduxForm } from 'redux-form';

let MyReduxForm ({ handleSubmit, onSubmit }) =>
<View>
  <Text style={styles.label}>{I18n.t('strings.formAccount.fields.email.label')}</Text>
  <Field
    name="email"
    type="text"
  />
</View>


MyReduxForm = reduxForm({
  form: 'myReduxForm',
  validate,
})(MyReduxForm);

FormAccount = connect()(MyReduxForm);

[aksonov]

I don't understand - why MyReduxForm is children of Scene ?

[MaxInMoon]

@aksonov the schema is very trivial. In fact MyReduxForm is a children of the Scene component's PageHome

[MaxInMoon]

@aksonov did you ever used/encountered a real working exemple with redux-form?

[aksonov]

No, I don't have any. Please give me link to repo so I can reproduce that issue. Please also check pure react-navigation, maybe the issue is from there:
react-navigation/react-navigation#1589

[MaxInMoon]

@aksonov I'll do my best to provide one before tomorrow

[aksonov]

Closed due inactivity