0
votes

Etat non mis à jour dans React.js

J'ai créé un formulaire de base dans React.js où je suis capable d'obtenir les valeurs une fois que l'utilisateur soumet le formulaire.

Toutefois, lorsque j'essaie de modifier les valeurs à l'aide de la fonction HandlesUBMIT CODE>, je ne vois pas les modifications apportées dans l'état. P>

J'ai fait une copie d'un exemplaire L'état et les changements sont reflétés dans l'état copié. Mais lorsque je fixe l'ancien état égal à l'état mis à jour, les modifications ne sont pas réfléchies par p>

mon code sont les suivants P>

    state = {    
        name: null,
        ContactNumber: null

    }

    handleChange = (event) => {
        this.setState({
            [event.target.name] : event.target.value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault()
        let Copystate = JSON.parse(JSON.stringify(this.state))
        Copystate.ContactNumber = 100

        console.log(Copystate) // displaying the contact number as 100

        this.setState({
            state : Copystate
        })

        console.log(this.state) // displays the number which was submitted in the form

    }
    render(){
        return(
            <div>
                <h2>Form</h2>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <label>Name</label>
                        <input type="text" name="name" required = {true} onChange = {this.handleChange}/>

                        <label>Contact Number</label>
                        <input type="number" name="ContactNumber" required = {true} onChange = {this.handleChange}/>

                        <button type="submit" label="submit" >Submit</button>
                    </div>
                </form>
            </div>
        );
    }
}

javascript reactjs react-state react-state-management

0 commentaires

3 Réponses :

1
votes

AVIS: SETState est asynchrone: documenter Etat-mises à jour - May-be-asynchrones

Vous pouvez utiliser une fonction de rappel pour obtenir l'état mis à jour P> xxx pré>

ou vous pouvez choisir d'utiliser async / attendre code> p> xxx pré>

Ces deux méthodes n'auront pas affecter la rendu depuis une fois que l'état est mis à jour, le rendu procéderait. p>

si vous console code> dans le rendu () code> Vous constaterez qu'il devrait toujours être mis à jour enfin. P>

render() {
  console.log(this.state);
  return (
    ...
  )
}

0 commentaires

0
votes

Statut est asynchrone. Donc, vous pouvez faire l'une des opérations suivantes - 1. Faites un rappel dans le STSTATE pour enregistrer l'état ou 2. Écrivez votre déclaration de console dans la fonction de rendu.

0 commentaires

0
votes

Pourquoi faites-vous cela?

handleSubmit = (event) => {
        event.preventDefault();
        let { ContactNumber } = this.state;
        ContactNumber = 100;

        console.log(ContactNumber); // displaying the contact number as 100

        this.setState({
            ContactNumber: ContactNumber
        }, () => {
           console.log(this.state) // displays the number which was submitted in the form
        })
    }

0 commentaires