React-native FlatList not rerendering row when props change

The problem here lies within the fact that

  1. You are mutating an existing slice of state instead of creating a mutated copy

_onCategoryChosen = category => {
    var oldReportCopy = this.state.report; // This does not create a copy!
    oldReportCopy.selectedCategory = category;
    this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};

This should be

_onCategoryChosen = category => {
    var oldReportCopy = Object.assign({}, this.state.report);
    oldReportCopy.selectedCategory = category;
    // setState handles partial updates just fine, no need to create a copy
    this.setState({ report: oldReportCopy });
};

  1. The props of FlatList remain the same, your _renderRow function may rely on the selectedCategory prop which does change (If not for the first mistake), but the FlatList component does not know about that. To solve this, use the extraData prop.

     <FlatList
       data={this.props.items.categories.edges}
       renderItem={this._renderRow}
       horizontal={true}
       keyExtractor={(item, index) => item.node.id}
       extraData={this.props.selectedCategory}
     />
    

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)