Bonjour, Cela commence à faire un certain temps que j'utilise React Js et cela fait longtemps qu'un problème se pose. Dans une fonction de rendu React, lorsqu'une fonction fléchée change un state, celui-ci n'est pas actualisé de suite à cause de l'exécution asynchrone du call. Or, j'ai vraiment besoin dans un cas spécifique d'avoir le changement directement après.
Dans mon cas, il n'est pas vraiment possible de faire des retours de ce type. Je n'ai pas trouvé comment utiliser useSetState ... De plus, j'ai également vu que l'on pouvait utiliser des useEffect pour avoir ce résultat mais cela ne semble pas applicable dans mon cas.
Je m'adresse aux développeurs React, comment puis-je actualiser ou du moins accéder à un state juste après l'avoir modifié.
Bonjour, dans un composant écrit avec la syntaxe des classe tu peux passer un 2ièm argument à this.setState qui est une fonction qui sera exécuter lorsque l'état local est mis à jour.
Un exemple simpliste:
import React from 'react';
export default class Foobar extends React.Component {
constructor() {
this.state = {
test: 42
};
}
handleClick() {
this.setState({
test: 50
}, () => {
console.log("> state has been update");
console.log(this.state);
})
}
render() {
return (
<button onlick={handleClick}>
click me! ({this.state.test})
</button>
)
}
}
Avec un composant Purement Fonctionnel tu peux utiliser le hooks useEffect
qui te permet de définir une fonction ainsi qu'une liste de dépendances, la fonction s'exécutera à chaque fois qu'une dépendance à changé.
import React from 'react';
const Foobar = () => {
const [test, setTest] = React.useState(42);
const handleClick = () => {
setTest(50);
}
// déclare un effet de bord,
// une fonction qui sera exécuter à chaque changement du composant (par défaut):
React.useEffect(() => {
console.log("> une dépendance de l'effet de bord à été modifié");
console.log(test);
}, [test]); // déclare les dépendences de l'effet de bord
// ici les dépendences sont l'état local "test"
// l'effet de bord ne ce rechargera pas à chaque changement du composant
// mais uniquement lorsque une des dépendence à été modifier
return (
<button onlick={handleClick}>
click me {test}
</button>
)
}
export default Foobar;
la fonction dans le hooks useEffect s'exécute après le rendue du composant.
Bonjour, dans un composant écrit avec la syntaxe des classe tu peux passer un 2ièm argument à this.setState qui est une fonction qui sera exécuter lorsque l'état local est mis à jour.
Un exemple simpliste:
import React from 'react';
export default class Foobar extends React.Component {
constructor() {
this.state = {
test: 42
};
}
handleClick() {
this.setState({
test: 50
}, () => {
console.log("> state has been update");
console.log(this.state);
})
}
render() {
return (
<button onlick={handleClick}>
click me! ({this.state.test})
</button>
)
}
}
Avec un composant Purement Fonctionnel tu peux utiliser le hooks useEffect
qui te permet de définir une fonction ainsi qu'une liste de dépendances, la fonction s'exécutera à chaque fois qu'une dépendance à changé.
import React from 'react';
const Foobar = () => {
const [test, setTest] = React.useState(42);
const handleClick = () => {
setTest(50);
}
// déclare un effet de bord,
// une fonction qui sera exécuter à chaque changement du composant (par défaut):
React.useEffect(() => {
console.log("> une dépendance de l'effet de bord à été modifié");
console.log(test);
}, [test]); // déclare les dépendences de l'effet de bord
// ici les dépendences sont l'état local "test"
// l'effet de bord ne ce rechargera pas à chaque changement du composant
// mais uniquement lorsque une des dépendence à été modifier
return (
<button onlick={handleClick}>
click me {test}
</button>
)
}
export default Foobar;
la fonction dans le hooks useEffect s'exécute après le rendue du composant.
- Edité par SamuelGaborieau3 il y a environ 5 heures
Merci beaucoup pour cette réponse. J'ai en revanche remarqué que si on supprime l'affichage des variables dans le useEffect, l'update n'est plus instantané.
Dans mon cas, pour que ça soit plus explicite, je fais un fetch à mon backend pour récupérer des data par rapport à un id que j'ai besoin d'afficher directement après.
Mon problème est que soit j'incrément soit je décrément, et il y a un décalage ...
- Edité par MaxMlr 31 mai 2022 à 21:14:55
React State actualisation
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
suggestion de présentation.