[FlatList] shouldItemUpdate called with incorrect {item,index} #13503
Description
Description
symptom:
supply shouldItemUpdate() and data=[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 7, 8, 9, 10, 11, ...] to a FlatList with 3 columns
shouldItemUpdate() is called with incorrect data {index: 6, item: 9}
expect {index: 6, item:7} or {index: 8, item 9}
further investigation:
seems that in FlatList.js, _shouldItemUpdate() does not take numColumns into account when calling shouldItemUpdate()
Reproduction Steps and Sample Code
obverse the values received in shouldItemUpdate()
class AppClass extends React.Component {
constructor(props) {
super(props)
this.data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 7, 8, 9, 10, 11, ] ;
}
shouldItemUpdate(props, nextProps) {
// some code
}
render() {
return (
<FlatList
{...(this.modifiedProps)}
data={this.data}
numColumns={3}
shouldItemUpdate={this.shouldItemUpdate}
renderItem={this.renderItem}>
</FlatList>
);
}
}Solution
add *numColumns in _shouldItemUpdate function seems to have solved the problem
_shouldItemUpdate = (prev, next) => {
const {numColumns, shouldItemUpdate} = this.props;
if (numColumns > 1) {
return prev.item.length !== next.item.length ||
prev.item.some((prevItem, ii) => shouldItemUpdate(
{item: prevItem, index: prev.index*numColumns + ii},
{item: next.item[ii], index: next.index*numColumns + ii},
));
} else {
return shouldItemUpdate(prev, next);
}
};Additional Information
- React Native version: 0.43.2
- Platform: Android 4.1.2 & 7.1.1
- Development Operating System: Win10
- Dev tools: Android SDK Tools 26.0.1