J'utilise react-navigation pour naviguer entre deux écrans tout en passant des données entre eux.
Flux: Écran A (transmet les données) -> Écran B -> (met à jour et renvoie les données) Écran A.
Dans l'écran A, j'utilise un composant enfant qui doit être mis à jour / restitué sur recevoir les données de l'écran B.
J'ai vérifié si les données sont correctement transmises et je suis certain que l'état utilisé par le composant enfant dans l'écran principal est en cours de mise à jour. Je n'arrive tout simplement pas à comprendre pourquoi le composant enfant n'est pas à nouveau rendu après avoir lu la nouvelle valeur de state?
Écran principal:
componentWillMount() {
// based on value of this.props.count, I'm setting the value of 'text' in this component
if(this.props.count == 1) {
this.setState({text: 'abc'})
} else {
this.setState({text: 'cde'})
}
}
// later on in the code, render method:
<View>
<Text>
{this.state.text}
</Text>
</View>
Composant B:
updateCount(data) {
// Logic to update state of a counter variable
this.setState({ count: data })
}
// and then later on in the code, I'm calling the child Component 'B'
<B prop={this.state.count} />
3 Réponses :
Vous devrez utiliser componentDidUpdate avec cela. Cependant, si vous utilisez des hooks, cela supprimera à la fois le componentDidMount et le componentDidUpdate. Pour votre exemple basé sur les classes, ce serait probablement quelque chose du genre.
componentdidUpdate(prevProps, props) => {
if(prevProps.count !== this.props.count){
if(this.props.count == 1) {
this.setState({text: 'abc'})
}
else {
this.setState({text: 'cde'})
}}
Cependant, selon la documentation, ces méthodes sont considérées comme héritées et vous devriez les éviter dans le nouveau code:
UNSAFE_componentWillMount()
Abandonnez cela en faveur de componentDidMount et componentDidUpdate, ou passez aux hooks (c'est la meilleure option!)
J'ai littéralement mis componentWillMount n'est pas sûr, donc je ne sais pas vraiment comment je recommandais quelque chose qui est hérité? Ni componentDidMount ni componentDidUpdate ne sont hérités, alors quelle méthode héritée ai-je recommandée?
Aussi, j'ai recommandé d'utiliser un crochet, qui vient de sortir alors?
Mon mauvais, j'ai mal lu ce que vous avez dit au départ. La méthode getDerivedStateFromProps doit toujours prendre une grande considération car il s'agit de l'approche la plus fiable, mais vous recommandez également d'utiliser des hooks.
Tout bon! Je l'ai aussi mal formulé, donc ce n'est pas seulement toi. Honnêtement, à ce stade, il est tellement plus propre d'utiliser des crochets.
Mettre à jour le composant B: (code ci-dessous)
constructor(props) {
super(props);
this.state = {
count: props.count
};
}
componentWillReceiveProps(nextProps) {
if (nextProps.count != this.props.count){
this.setState({
count: nextProps.count
})
}
}
componentDidMount() {
this.setTextValue();
}
componentWillUpdate() {
this.setTextValue();
}
setTextValue = () => {
if(this.state.count == 1) {
this.setState({text: 'abc'})
} else {
this.setState({text: 'cde'})
}
}
Incluez le reste de votre code.
Étudiez bien les méthodes de cycle de vie .
J'ai répondu à ma question car j'ai réalisé que je ne mettais pas à jour la valeur de prop dans le code de mon composant pour refléter le changement d'état de l'élément parent.
Je suppose que c'est la raison pour laquelle j'étais si confus en premier lieu car le re-rendu sur changement d'état est le CŒUR de React son fonctionnement. J'ai utilisé react-devtools pour déboguer et comprendre le cycle de vie de mon composant enfant. Tout fonctionne maintenant! Je ne sais pas si j'ai besoin de crochets / d'autres méthodes de cycle de vie pour cette fonctionnalité simple, mais j'apprécie l'aide de tout le monde!
Essayez de remplacer componentWillMount par componentDidMount. Aussi, pouvez-vous créer un code et une boîte?