TimDOES
TimDOES

Reputation: 91

React-Native this.setState() is not working

I am unable to get react-native's this.setState(); to work.

When I run the onUpdate method, I can see the correct JSON object being returned.

The issue is when the setState function is called nothing happens and the method fails. No more code is executed below it. It also not re-render the component after the setState function.

Here is my component code below:

var App = React.createClass({

  getInitialState: function() {
    return {
      view: Login,
      menu: false,
    }
  },

  componentDidMount: function() {
    var self = this;
  },

  onUpdate: function(val){
    // val is verified as an object here when I log to console
    this.setState(val);
    // nothing runs here. The above line errors out the function
  },

  render: function () {
    if(this.state.view == 'Home'){
      this.refs.sideMenu.frontView = Home;
      return (
        <View style={styles.container} >
          {sideMenu}
        </View>
      );
    }
    return (
      <View style={styles.container} >
        <Login onUpdate={this.onUpdate} />
      </View>
    );
  }
});

Upvotes: 6

Views: 39517

Answers (2)

TimDOES
TimDOES

Reputation: 91

I was able to correct the issue by using the Flux architecture. I used the McFly package found here: https://github.com/kenwheeler/mcfly

Upvotes: -5

Sten
Sten

Reputation: 1109

Your Login components onUpdate method is probably called with an object that cannot be serialized. For example it could contain functions, or maybe circular references.

In your onUpdate method you should pick the stuff you are interested in from the val argument, and insert that into the state. Something like this:

this.setState({
userName: val.userName,
userId: val.userId
});

or whatever is included in the object that is sent to onUpdate.

Upvotes: 10

Related Questions