Bonsoir,

J'apprend react depuis quelque jours, et il y a un problème que je rencontre régulièrement.

Il concerne les input de type texte. Lorsque j'entre quelque chose dans un champs, si je veux effectuer une action sur celui-ci en temps réel (par exemple convertir d'euro à dollar) sans devoir cliquer sur un boutton pour effectuer la conversion, le traitement commence à partir du champs vide plutot que à partir du premier chiffre entré.

Un exemple, admettons que je rentre "5" dans mon champs, le traitement de conversion ne va pas prendre 5 mais rien en premier lieu, par contre si j'ajoute autre chose ensuite par exemple un 4, le traitement va se faire sur le 5 et pas sur le 4, comms si il avait un retard.

Voici quelque chose qui correspond au problème (j'ai re codé un truc vite fait car mon code est degoutant suite aux multiples modif effectuées)

class Convert extends React.Component{

    constructor(props){
        super(props)
        this.state={
            value: "",
            resultat: ""
        }
    }

    handleField = (e) =>{
        this.setState({
            value: e.target.value,
        })

        this.toDollar(this.state.value)
    }

    toDollar = (value) =>{
        this.setState({resultat: value*1.14})
    }

    render(){
        return <React.Fragment>
            <label htmlFor="field">Convertir euro en dollar</label>
            <input type="text" value={this.state.value} onChange={this.handleField} id="field"/>
            <p>Résultat: {this.state.resultat}</p>
        </React.Fragment>
    }
}

Peut être que la réponse est toute simple mais je comprend pas...
Logiquement l'état de "value" devrait avoir changé lors de l'appel de la fonction non ?

Merci !

Le 13 février 2022 à 01:36:49 :
Bonsoir,

J'apprend react depuis quelque jours, et il y a un problème que je rencontre régulièrement.

Il concerne les input de type texte. Lorsque j'entre quelque chose dans un champs, si je veux effectuer une action sur celui-ci en temps réel (par exemple convertir d'euro à dollar) sans devoir cliquer sur un boutton pour effectuer la conversion, le traitement commence à partir du champs vide plutot que à partir du premier chiffre entré.

Un exemple, admettons que je rentre "5" dans mon champs, le traitement de conversion ne va pas prendre 5 mais rien en premier lieu, par contre si j'ajoute autre chose ensuite par exemple un 4, le traitement va se faire sur le 5 et pas sur le 4, comms si il avait un retard.

Voici quelque chose qui correspond au problème (j'ai re codé un truc vite fait car mon code est degoutant suite aux multiples modif effectuées)

class Convert extends React.Component{

    constructor(props){
        super(props)
        this.state={
            value: "",
            resultat: ""
        }
    }

    handleField = (e) =>{
        this.setState({
            value: e.target.value,
        })

        this.toDollar(this.state.value)
    }

    toDollar = (value) =>{
        this.setState({resultat: value*1.14})
    }

    render(){
        return <React.Fragment>
            <label htmlFor="field">Convertir euro en dollar</label>
            <input type="text" value={this.state.value} onChange={this.handleField} id="field"/>
            <p>Résultat: {this.state.resultat}</p>
        </React.Fragment>
    }
}

Peut être que la réponse est toute simple mais je comprend pas...
Logiquement l'état de "value" devrait avoir changé lors de l'appel de la fonction non ?

Merci !

C'est parfaitement normal, setState est asynchrone.
Toi tu appelles handleField en faisant un setState puis en appelant une méthode qui en fait un second.
Du coup, le toDollar se fait avec le state avant le premier appel.

Pour régler cela tu as 2 options :
- Factoriser et faire un seul setState qui change les deux valeurs en 1 appel :

 
this.setState({
            value: e.target.value,
            resultat: e.target.value * 1.14  // ou refactor this.toDollar() et retourner le bon montant
        })

- Utiliser le callback du premier setState pour appeler this.toDollar :

 
this.setState({
            value: e.target.value,
        }, ()=> this.toDollar(this.state.value))

et aussi je te conseilles de lire ça car il y a d'autres "pièges" pour les débutants avec le state (lors de la mise à jour d'une valeur avec la valeur "actuelle de cette même valeur (compteur par ex) ) : https://reactjs.org/docs/faq-state.html

Il y a aussi une 3e option qui se nomme "componentDidUpdate" (ou useEffect avec les hooks) qui permet de réagir quand une prop ou le state a changé.

componentDidUpdate(prevProps, prevState) {
  if (prevState.value !== this.state.value) {
     this.toDollar(this.state.value)
  }
}

Ah oui merci, je crois que j'ai compris.
En tout cas j'ai réussi à faire ce que je voulais donc je pense que ça rentre.
J'ai mis au point un système de recherche classique... c'est pas facile en vrai !

Mais du coup j'ai compris qu'il faut toujours prendre en compte l'état puisqu'il s'actualise de manière asynchrone.

Et si j'ai bien compris la fonction componentDidMount (qui est poutant la base haha) intervient dès qu'une modification de l'état est détecté.

Merci, ça résoud mon problème

Conseils pour React, concentre toi sur les fonctions components, c'est désconseillé de faire de nouveaux components avec des class ( c'est dit dans la doc de React elle-même ).

Ah ouais ? Je te cache pas que j'apprend petit à petit à partir de vidéos donc j'ai pas beaucoup été sur la doc.

Je vais aller voir ça plus en profondeur alors, merci !

+ j'aime ta signature