0

I am using react and have a component with the listChanged function, called after a Store change event :

getInitialState: function () {
    return {
        isLive: true,
        data: [],
    };
},

componentDidMount: function() {  
    MyStore.addChangeListener(this.listChanged);
},

listChanged: function() {
    if (this.state.isLive) {
        var data = MyStore.getData();
        var newState = {
            data: data
        };

        this.setState(newState);
    }
},

pause: function(e) {
    this.state.isLive = !this.state.isLive;
},

and I have a button that switches the isLive state by calling the pause function. This is working since I have a visual cue bound to that variable and I also confirmed with React Debug Extension for Google Chrome (in the React tab for my component).

Is it legal to check that variable in such a function responding to an event? The function threats my isLive state as true because my state data is always refreshed no matter the variable value. But I visually confirmed that this variable is set to false...

TLDR : even if the this.state.isLive variable is set to false, the this.setState(newState); is still called in the listChanged function.

Bruno
  • 4,685
  • 7
  • 54
  • 105
  • Can you reproduce the problem in a fiddle? (Use the [React Base Fiddle](https://jsfiddle.net/reactjs/69z2wepo/).) – Jordan Running Aug 08 '15 at 21:03
  • @Jordan I tried to start but it is difficult, I need all the classes for Actions, Dispatcher and all of their dependencies for events... – Bruno Aug 08 '15 at 21:14

1 Answers1

1

Yes, it's completely valid. This, however, is not:

pause: function(e) {
    this.state.isLive = !this.state.isLive;
},

You cannot set a state value this way. You must use setState:

pause: function(e) {
    this.setState({ isLive: !this.state.isLive });
},
Jordan Running
  • 102,619
  • 17
  • 182
  • 182