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.

J'ai notamment vu cet article récent: https://medium.com/ableneo/react-setstate-does-not-immediately-update-the-state-84dbd26f67d5

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é.

Merci d'avance

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.

J'ai dût remplacer les:

onClick

par des:

onlick

parce que le WAF du forum me bloquer le post.

-
Edité par SamuelGaborieau3 31 mai 2022 à 12:14:47

SamuelGaborieau3 a écrit:

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.

J'ai dût remplacer les:

onClick

par des:

onlick

parce que le WAF du forum me bloquer le post.

-
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