Mettre à jour les propriétés d'état imbriquées dans React

1. la fonction setState() dans React
2. Mettre à jour les propriétés d’état imbriquées dans React
3. Conclusion

Lorsque nous essayons de mettre à jour l’état initial d’un composant dans React, cela signifie que nous voulons que cet état initial change en réponse à une action de l’utilisateur ou à un événement système.

Lorsque l’état initial est modifié ou mis à jour, les informations affichées sur le navigateur changent également. En effet, React rend à nouveau le composant avec le code mis à jour.

La fonction setState() est la fonction principale de React qui peut mettre à jour l’état imbriqué d’un composant.

la fonction setState() dans React

Après avoir défini l’état initial d’un composant, le React setState() est la fonction appelée pour initialiser un nouvel état. Parce que nous avons besoin que l’utilisateur déclenche un événement, nous appliquerons la fonction onClick aux côtés de setState() pour écouter l’action entreprise par l’utilisateur, puis afficher le composant d’état mis à jour.

Mettre à jour les propriétés d’état imbriquées dans React

Nous allons maintenant examiner divers exemples qui montrent comment mettre à jour l’état initial d’un composant imbriqué.

Mettre à jour un seul attribut

Dans cet exemple, nous utiliserons la méthode setState() pour mettre à jour le composant d’état initial, et nous mettrons à jour une seule entrée qui existe dans le tableau :

Extrait de code (App.js) :

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {greeting :
        'Click the button to receive greetings'}

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({greeting :
        'Welcome!!!'})
}
render(){
    return (
    <div>
        <h2>Greetings Portal</h2>
        <p>{this.state.greeting}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Production:

Après avoir défini l’état initial du composant, nous devons d’abord lier le mot-clé greeting à la fonction updateState afin que React sache quel mot-clé rechercher dans les composants et modifier.

Ensuite, nous utilisons la fonction setState pour coder les données que nous voulons que le mot-clé greeting renvoie.

Enfin, nous utilisons l’écouteur d’événement onClick avec la fonction updateState, de sorte que lorsque l’utilisateur clique sur Click me! bouton, les informations sur le navigateur sont modifiées et mises à jour.

Mettre à jour plusieurs attributs

Cet exemple est beaucoup plus similaire à l’exemple précédent. Mais ici, nous avons affaire à plusieurs entrées dans l’état du composant.

Extrait de code (App.js) :

import React, { Component } from 'react'
class App extends Component {
constructor(props){
    super(props)

    // Set initial state
    this.state = {
    test: "Nil",
    questions: "0",
    students: "0"
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
updateState(){
    // Changing state
    this.setState({
        test: 'Programming Quiz',
        questions: '10',
        students: '30'
    })
}
render(){
    return (
    <div>
        <h2>Test Portal</h2>
        <p>{this.state.test}</p>

        <p>{this.state.questions}</p>

        <p>{this.state.students}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
)
}
}
export default App;

Production:

Après avoir défini le premier état, nous lions le mot-clé this.state. Après cela, nous procédons à la mise à jour des états des éléments du tableau.

Parce que nous avons affaire à plusieurs éléments, nous plaçons chaque élément dans un élément de paragraphe pour l’afficher comme une liste lorsqu’il est rendu sur la page Web.

Mettre à jour l’état à l’aide d’accessoires

Dans cet exemple, nous utilisons des accessoires pour mettre à jour l’état initial. Props est un mot court pour les propriétés.

Cette méthode est idéale pour traiter les tâches qui incluent plusieurs éléments dans le tableau et des formes complexes de données, et elle aidera à mettre à jour facilement l’état.

Comme dans les exemples ci-dessus, nous faisons le codage dans le App.js.

Extrait de code (App.js) :

import React, { Component } from 'react'
class App extends Component {
static defaultProps = {
    testTopics : [
        'React JS', 'Node JS', 'Compound components',
        'Lifecycle Methods', 'Event Handlers',
        'Router', 'React Hooks', 'Redux',
        'Context'
    ]
}

constructor(props){
    super(props)

    // Set initial state
    this.state = {
    testName: "React js Test",
    topics: ''
    }

    // Binding this keyword
    this.updateState = this.updateState.bind(this)
}
listOfTopics(){
    return (
    <ul>
        {this.props.testTopics.map(topic => (
            <li>{topic}</li>
        ))}
    </ul>
    )
}

updateState(){
    // Changing state
    this.setState({
    testName: 'Test topics are:',
    topics: this.listOfTopics()
    })
}
render(){
    return (
    <div>
        <h2>Test Information</h2>
        <p>{this.state.testName}</p>
        <p>{this.state.topics}</p>
        {/* Set click handler */}
        <button onClick={this.updateState}>
        Click me!
        </button>
    </div>
    )
}
}
export default App;

Production:

On commence par passer les multiples données dans notre tableau testTopics. Ensuite, nous définissons l’état initial de nos données dans le tableau testName.

Après avoir lié le mot-clé testName au updateState, nous créons ensuite une fonction listOfTopics qui renverra les éléments du tableau testTopics sous forme de liste avec un état de sujet.

Ensuite, nous utilisons la fonction setState() à côté de l’écouteur d’événement onClick, de sorte que lorsque le Click me! bouton est poinçonné, la liste des items s’affichera à la place de l’état initial, React js Test.

Mettre à jour l’état avec sa valeur précédente

Ceci est un exemple numérique où nous voulons que la valeur initiale augmente. Dans ce cas, nous voulons que l’état initial augmente au lieu de changer.

Parce que nous voulons que l’état initial augmente, nous passerons le prevState comme paramètre à l’intérieur de la fonction useState(), et useState() sera utilisé dans une fonction fléchée.

Extrait de code (App.js) :

import React, { Component } from 'react'

class App extends Component {

    constructor(props){
        super(props)

        // Set initial state
        this.state = {
            count: 0
        }

        // Binding this keyword
        this.updateState = this.updateState.bind(this)
    }

    updateState(){
        // Changing state
        this.setState((prevState) => {
            return { count: prevState.count + 1}
        })
    }

    render(){
        return (
            <div>
                <h2>Click Counter</h2>
                <p>You have clicked me {this.state.count} times.</p>
                {/* Set click handler */}
                <button onClick={this.updateState}>
                    Click me!
                </button>
            </div>
        )
    }
}

export default App;

Production:

Nous avons appelé prevState à l’intérieur de la fonction setState afin que lorsque le bouton est cliqué, il reconnaisse le dernier état dans lequel se trouvaient les données et augmente cet état de 1, comme nous l’avons défini dans le tableau return pour augmenter le nombre de 1.

Conclusion

Il existe diverses utilisations pour mettre à jour l’état d’un composant dans React. Mais, avec les exemples que nous avons discutés, un codeur devrait être capable d’appliquer les différents cas d’utilisation dans n’importe quelle situation.