React-Native this.setState() is not working

Question

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>
    );
  }
});

I think we need to also see what `Login` does. You claim that `val` is an object, but there's something fishy going if it doesn't work... :) — Samuli Hakoniemi, Apr 06 '15 at 09:54
It would also be helpful to know what the error is you're getting then you call `setState`. — Brennan, Apr 08 '15 at 01:44

score 10 · Answer 1 · answered Apr 13 '15 at 12:24

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.

What do you mean by "an object that cannot be serialized"? – ryanwebjackson May 10 '20 at 01:48 — ryanwebjackson, May 10 '20 at 01:48

score -5 · Accepted Answer · answered May 12 '15 at 15:19

-5

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

answered May 12 '15 at 15:19

TimDOES

91
1
2
7

React-Native this.setState() is not working

2 Answers2