React-native FlatList not rerendering row when props change

Question

I\'m having an issue with the new FlatList component. Specifically, it does not rerender it\'s rows, even though props that the row is dependent on changes.

---

The F

Answer 1

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

---

2. 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.

    item.node.id}
     extraData={this.props.selectedCategory}
   />