Réagir indigènes FlatList pas nouveau rendu ligne quand changer les accessoires
Je vais avoir un problème avec la nouvelle FlatList composant. Plus précisément, il n'est pas rerender c'est les lignes, même si les accessoires que la ligne est dépendant de l'évolution.
La FlatList docs dit que:
C'est un PureComponent ce qui signifie qu'il ne sera pas re-rendre si
les accessoires restent de faible égale. Assurez-vous que tout votre renderItem
fonction dépend de la est passé comme un accessoire qui n'est pas === après les mises à jour,
sinon, votre INTERFACE utilisateur ne peut pas mettre à jour sur les changements. Cela inclut les données
prop et le composant parent état.
LA QUESTION
Cependant, vu que j'ai modifier un ID de la selectedCategory élément - l'accessoire qui devrait indiquer si la ligne est "sélectionné" ou pas - je crois que les accessoires doivent rerender. Suis-je trompé?
J'ai coché la case 'componentWillReceiveProps" des méthodes à la fois de la liste et de la ligne de composants, et la liste reçoit la mise à jour, mais la ligne du cycle de vie de la méthode n'est jamais appelé.
Si je comprend un hasard, inutile boolean valeur de l'état dans la liste de composants, et de basculer d'avant en arrière lorsque les accessoires de mise à jour, il fonctionne, mais je ne sais pas pourquoi?
state = { updated: false };
componentWillReceiveProps(nextProps) {
this.setState(oldstate => ({
updated: !oldstate.updated,
}));
}
<FlatList
data={this.props.items.allAnimalCategories.edges}
renderItem={this._renderRow}
horizontal={true}
keyExtractor={(item, index) => item.node.id}
randomUpdateProp={this.state.updated}
/>
LE CODE
De la structure de mon code est: j'ai un composant conteneur avec de la logique et de l'état, qui contient un FlatList composant (présentation, pas d'état), qui contient une coutume de présentation de la ligne.
Container
Custom list component that includes the FlatList component
(presentational, stateless) and the renderRow method
Custom row (presentational, stateless)
Le conteneur comprend ce composant:
<CustomList
items={this.props.viewer}
onCategoryChosen={this._onCategoryChosen}
selectedCategory={this.state.report.selectedCategory}
/>
CustomList:
class CustomList extends Component {
_renderRow = ({ item }) => {
return (
<CustomListRow
item={item.node}
selectedCategory={this.props.selectedCategory}
onPressItem={this.props.onCategoryChosen}
/>
);
};
render() {
return (
<View style={_styles.container}>
<FlatList
data={this.props.items.categories.edges}
renderItem={this._renderRow}
horizontal={true}
keyExtractor={(item, index) => item.node.id}
randomUpdateProp={this.state.updated}
/>
</View>
);
}
}
(données proviennent de Relais)
Enfin la ligne:
render() {
const idsMatch = this.props.selectedCategory.id == this.props.item.id;
return (
<TouchableHighlight onPress={this._onItemPressed}>
<View style={_styles.root}>
<View style={[
_styles.container,
{ backgroundColor: this._getBackgroundColor() },
]}>
{idsMatch &&
<Image
style={_styles.icon}
source={require('./../../res/img/asd.png')}
/>}
{!idsMatch &&
<Image
style={_styles.icon}
source={require('./../../res/img/dsa.png')}
/>}
<Text style={_styles.text}>
{capitalizeFirstLetter(this.props.item.name)}
</Text>
</View>
<View style={_styles.bottomView}>
<View style={_styles.greyLine} />
</View>
</View>
</TouchableHighlight>
);
}
La ligne n'est pas intéressant, mais je l'ai inclus pour montrer qu'il est tout à fait apatrides et dépendante de ses parents les accessoires.
L'état est mis à jour comme suit:
_onCategoryChosen = category => {
var oldReportCopy = this.state.report;
oldReportCopy.selectedCategory = category;
this.setState(Object.assign({}, this.state, { report: oldReportCopy }));
};
État ressemble à ceci:
state = {
...
report: defaultStateReport,
};
const defaultStateReport = {
selectedCategory: {
id: 'some-long-od',
name: '',
},
...
};
- Votre référence à la documentation résolu mon problème.
Vous devez vous connecter pour publier un commentaire.
Le problème ici réside dans le fait que
Cela devrait être
Les accessoires de FlatList restent les mêmes, votre
_renderRow
fonction peut s'appuyer sur lesselectedCategory
prop qui ne le changer (Si ce n'est pour la première erreur), mais le FlatList composante ne sait pas sur qui. Pour résoudre ce problème, utilisez laextraData
prop.Simplement, vous pouvez résoudre ce problème en passant accessoires à extraData dans liste à plat composant comme ça,
Je suis d'accord avec Nimelrian. Aussi, Si votre état est un Tableau, vous pouvez créer un Objet de Tableau de l'état en faisant:
Ensuite utiliser .méthode push() pour ajouter votre nouvel objet comme cela:
vous pouvez ensuite définir ce nouvel Objet Array retour à l'état: