javascript - React Native / Redux - setState - Cannot update during an existing state transition -

i'm building app using react native , redux , have come across problem during implementation. i'm receiving error says

setstate cannot update during existing state transition (such within render or component's constructor).

when load app simulator, seems trigger handlelogin() right away (and on loop) before user input.

here's authenticationcontainer , authenticationpage code:

authenticationcontainer.js:

'use strict'    import react, { component, proptypes } 'react';  import authenticatepage '../../components/authenticate/authenticatepage'  import { connect } 'react-redux';  import { bindactioncreators } 'redux'  import * sessionactioncreators '../../redux/session';  import {actions, actionconst} 'react-native-router-flux'    class authenticatecontainer extends component {      constructor(props) {          super(props);          this.state = {              email: '',              password: ''          };      }        handlelogin() {          this.props.dologin(this.state.email, this.state.password)              .then(() => actions.tabbar())      }        render() {          return (              <authenticatepage                  dologin = {this.handlelogin.bind(this)}                  error = {this.props.error}/>          );      }  }    authenticatecontainer.proptypes = {      dologin: proptypes.func.isrequired,      email: proptypes.string,      password: proptypes.string,      error: proptypes.string.isrequired  };    export default connect(      (state) => ({isfetching: state.session.isfetching, error: state.session.error}),      (dispatch) => bindactioncreators(sessionactioncreators, dispatch)  )(authenticatecontainer)

authenticationpage.js

'use strict'    import react, { component, proptypes } 'react';  import {text, view, touchablehighlight, alertios} 'react-native';  import t 'tcomb-form-native'  import _ 'lodash'  import estylesheet 'react-native-extended-stylesheet'  import viewcontainer '../viewcontainer'    // authenticatepage.proptypes = {  //     dologin: proptypes.func.isrequired,  //     onupdateform: proptypes.func.isrequired,  //     email: proptypes.string,  //     password: proptypes.string,  //     error: proptypes.string.isrequired  // };    var form = t.form.form;    var user = t.struct({email: t.string, password: t.string});    const options = {      auto: 'placeholders',      fields: {          email: {              autocapitalize: 'none',              autocorrect: false          },            password: {              autocapitalize: 'none',              autocorrect: false,              password: true,              securetextentry: true          }      }  };    export default class authenticatepage extends component {      constructor(props) {          super(props);          this.state = {              value: {                  email: '',                  password: ''              }          };      }        render() {          return (              <viewcontainer>                  <view>                      <form                          ref="form"                          type={user}                          options={options}                          value={this.state.value}/>                  </view>                  <view>                      <touchablehighlight                          onclick={this.props.dologin()}                          underlaycolor='#99d9f4'>                              <text>{_.capitalize('login')}</text>                      </touchablehighlight>                  </view>              </viewcontainer>          )      }  }

so handlelogin() function seems fire on page load , run repeatedly while throwing error. here's error i'm receiving simulator.

any appreciated!

i believe problem here:

onclick={this.props.dologin()} 

you call function on render, should passing prop instead. either try to

onclick={() => this.props.dologin()} 

or

onclick={this.props.dologin.bind(this)} 

to fix.