title: React Native MobX FlatList extraData
body: <p>I cannot get my rows to re-render when my observable variable changes. I can see the console log triggering and my manageCart function is indeed working. Only problem is that the rows will not update. I have tried setting extraData on the flatlist to extraData={this.props.mainStore.productDataSource.slice()} or without . slice() but it still does not help.</p>
  
  <pre><code>manageCart(id, type) {
      let tempOne = this.props.mainStore.productDataSource.slice();
      tempOne.map((b, i) =&gt; {
          if (b.product_id === id) {
              b.qty = b.qty + 1;
          }
      });
      this.props.mainStore.productDataSource = tempOne;
  }
  
      _renderRow = ({ item }) =&gt; {
          return (
              &lt;ProductRow
                  item={item}
                  orientation={this.props.uiStore.orientation}
                  manageCart={this.manageCart}
              /&gt;
          )
      }
  
  render() {
      console.log(this.props.mainStore.productDataSource.slice())
      return (
          &lt;View style={styles.container}&gt;
              &lt;StatusBarGray /&gt;
              &lt;FixedHeader {...this.props} headerUp={this.state.headerUp} /&gt;
              &lt;FlatList
                  onScroll={this.handleScroll.bind(this)}
                  scrollEventThrottle={1}
                  keyExtractor={(_, i) =&gt; i}
                  ListHeaderComponent={this._renderHeader}
                  data={this.props.mainStore.productDataSource.slice()}
                  renderItem={this._renderRow}
              /&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>