Dans mon projet natif react, lorsque je clique sur un bouton, l'état de mon application mobx est mis à jour.
Je souhaite utiliser la méthode du cycle de vie de react pour écouter cette mise à jour et la mettre à jour automatiquement. J'utilise donc componentDidUpdate .
<Button onPress={()=> this.setState({currentState:store.mobxState})}>
Mais il semble que cette méthode ne se mettra pas à jour automatiquement.
Dois-je utiliser une autre méthode de cycle de vie? Tout commentaire ou conseil serait vraiment utile. Merci d'avance!
Modifié
Dans mon premier écran, j'ai un bouton et onPress je peux stocker des données dans mobx store . Ensuite, dans mon deuxième écran, je veux appeler le mobx state et le mettre à jour avec l'état actuel de mon composant. Je pourrais utiliser le bouton quelque chose comme:
componentDidUpdate(nextProps, nextState) {
this.setState({number:store.requestObject.number},
console.log(this.state.number), 'state changed')
}
Ensuite, mon état actuel du composant correspondra à l ' état mobx cela fonctionne bien mais je veux le faire automatiquement (pas avec un bouton).
4 Réponses :
Vous n'obtiendrez pas la valeur d'état modifiée dans la ligne suivante. Nous pouvons utiliser la méthode de rappel ici
handleMonthChange_next = () => {
this.setState({
currentMonth: this.state.currentMonth + 1
}, () => {
this.props.getCalendarData(this.state.currentMonth)
})}
merci mais je ne sais pas si nous sommes sur la même longueur d'onde. ce que j'essaye de faire est d'écouter l'état de mise à jour et de mettre à jour automatiquement en utilisant la méthode de cycle de vie de réaction.
La méthode render de react n'est que la méthode du cycle de vie qui est appelée après setState dans la même classe. Quel est le cas d'utilisation de la liste des changements d'état dans la même classe?
Vous pouvez utiliser getDerivedStateFromProps
static getDerivedStateFromProps(props, state){
}
Notez que cette méthode est déclenchée sur chaque rendu, quel que soit le cause. Cela contraste avec UNSAFE_componentWillReceiveProps, qui se déclenche uniquement lorsque le parent provoque un nouveau rendu et non à la suite d'un local setState.
Pour être plus précis, lorsque vous appelez this.setState ({}) , votre getDerivedStateFromProps sera appelé et à partir de là, vous pourrez lire votre valeur d'état modifiée et effectuer certaines opérations .
Merci pour le commentaire. Je n'ai jamais vu cette méthode auparavant. Je lis les documents mais je suis toujours confus. Statique GetDeredEDeDeDeTateFromProps (accessoires, état) {this.setstate ({Numéro: Store.RequestObject.number}, console.log (this.state.number), 'État modifié ") ne fonctionnerait pas. }
Cela ne fonctionnerait pas comme ça, son but est de vous donner un événement chaque fois qu'il y a un changement d'état ou d'accessoires, donc chaque fois que vous faites setState () ou que vos accessoires sont modifiés, cette méthode sera appelée.
Pourriez-vous s'il vous plaît fournir un exemple de code que je l'apprécierais vraiment!
se référer ceci
Si vous ne voulez pas que vous ne voulez pas utiliser des méthodes données, effectuez votre événement personnalisé qui écoute l'état
stateListiner = (state) =>{
this.setState(state,()=>{
//listen to state change after setting it
// add your logic after state update
})
}
// call the state
let givenState = {name:'xyz',visible:false,}
this.stateListiner(givenState) // this will set your state and fire the callback function
Utilisez le rappel de setState :
componentDidUpdate(prevProps, prevState) {
if (prevProps.value !== this.props.value) {
// handle change, log it, api call, call other callback, etc...
}
}
Notez cependant que la configuration de l'état dans componentDidUpdate est recommandée pour être derrière une vérification conditionnelle afin de ne pas mettre votre code dans une boucle infinie. Le code ci-dessus sera. De plus, les paramètres qu'il reçoit sont l'état et les accessoires précédents, pas les suivants. Il n'est appelé qu'après que l'état a été mis à jour ou que le composant a reçu de nouvelles valeurs de prop.
componentDidUpdate(prevProps, prevState) {
this.setState(
{ number: store.requestObject.number },
() => console.log(this.state.number, 'state changed') // callback will fire after state update
);
}
Vous pouvez utiliser la fonction de rappel setState pour obtenir la valeur d'état mise à jour. Et chaque fois que vous mettez à jour votre état, vous pouvez toujours l'obtenir dans votre méthode de rendu.
@VikramThakur merci pour le commentaire. Ce serait vraiment bien si vous pouviez fournir un exemple de code!
Sûr. J'ai posté une réponse que vous pouvez essayer cela.
Qu'est-ce que
store.requestObject.numberdans votre exemple? D'où est ce que ça vient? Tel quel, sicomponentDidUpdateest appelé pour une raison quelconque, il restera bloqué dans une boucle infinie à moins questoreourequestObjectne soient pas définis et qu'un une erreur est lancée. Pouvez-vous fournir un exemple minimal et vérifiable qui reproduit ce que vous essayez de faire?oh c'est mon magasin mobx. J'essaye de mettre à jour mon état mobx avec l'état local.
Ok, il y a deux choses ici alors, votre état de l'application Mobx et cet état du composant actuel. Quel "état" est mis à jour? Et quel "état" essayez-vous de mettre à jour en fonction de la mise à jour précédente? Réagir Les fonctions de cycle de vie ne se soucient généralement que de réagir de l'état et des accessoires (
this.state etceci.props ).Je ne suis pas familier avec mobx, mais j'ai de l'expérience avec redux. Une brève recherche montre que mobx semble également cartographier le magasin, ou stocker des accesseurs / mutateurs pour réagir aux accessoires qui se font passer. Pouvez-vous fournir le gestionnaire de clic sur le bouton (c'est-à-dire le code qui met à jour certains états (ne sais toujours pas lequel)), et peut-être plus du code du composant de réaction?
@DrewReese merci pour les commentaires que j'apprécie vraiment! Une fois que j'ai enregistré mon état mobx, je veux que l'état actuel de mon composant corresponde à mon état mobx. J'espère que vous comprenez ce que j'essaie de dire! S'il vous plaît laissez-moi savoir si vous avez besoin de plus de détails!
Eh bien, en supposant que le gestionnaire de clic de bouton appelle une fonction pour définir une valeur dans votre état mobx, placez l'appel de réaction
setStatelà aussi avec la même valeur. Je suis curieux maintenant, pourquoi voulez-vous dupliquer l'état de l'application dans l'état d'un composant? On dirait une recette de bugs. L'état du composant doit concerner UNIQUEMENT les choses dont le composant se soucie, c'est-à-dire qu'il doit faire un suivi interne, pas des problèmes d'application entiers.@DrewReese merci, j'ai édité mon code s'il vous plaît jeter un oeil! btw la raison pour laquelle je duplique est parce que j'utilise plusieurs écrans et que je veux le passer en utilisant mobx.