ReactJSsetState()
Tous les composants React peuvent avoir un État associés à eux. L'état d'un composant peut changer soit en raison d'une réponse à une action effectuée par l'utilisateur, soit en raison d'un événement déclenché par le système. Chaque fois que l'état change, React restitue le composant au navigateur. Avant de mettre à jour la valeur de l'état, nous devons créer une configuration d'état initiale. Une fois que nous avons terminé, nous utilisons le Méthode setState() pour changer l'objet d'état. Il garantit que le composant a été mis à jour et appelle à un nouveau rendu du composant.
Table des matières
- Réagir à JS setState
- Étapes pour créer une application React :
- Mise à jour de plusieurs attributs
- Mise à jour des valeurs d'état à l'aide d'accessoires.
- Mise à jour de l'état en utilisant sa valeur précédente.
Réagir à JS setState
définir l'état est un appel asynchrone signifie que si un appel synchrone est appelé, il peut ne pas être mis à jour au bon moment, comme pour connaître la valeur actuelle d'un objet après une mise à jour à l'aide de setState, il peut ne pas donner la valeur actuelle mise à jour sur la console. Pour obtenir un comportement synchrone, il faut transmettre la fonction au lieu de l'objet à setState.
Syntaxe:
Nous pouvons utiliser setState() pour changer l'état du composant directement ainsi que via une fonction fléchée.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName : prevState.stateName + 1 })) Étapes pour créer une application React :
Étape 1: Créez une application React à l'aide de la commande suivante :
npx create-react-app foldername
Étape 2: Après avoir créé le dossier de votre projet, c'est-à-dire le nom du dossier, accédez-y à l'aide de la commande suivante :
cd foldername
Structure du projet :
Approche 1 : Mise à jour d'un seul attribut
Nous définissons notre valeur d'état initiale à l'intérieur fonction constructeur et créez une autre fonction état de mise à jour() pour mettre à jour l'état. Désormais, lorsque l'on clique sur le bouton, ce dernier se déclenche comme un événement onClick ce qui change la valeur de l'état. Nous exécutons la méthode setState() dans notre Fonction updateState() en écrivant:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) Comme vous pouvez le voir, nous passons un objet à setState(). Cet objet contient la partie de l'état que nous voulons mettre à jour qui, dans ce cas, est la valeur de salutation . React prend cette valeur et la fusionne dans l'objet qui en a besoin. C'est comme si le composant bouton demandait ce qu'il devait utiliser pour mettre à jour la valeur de Greeting et setState() répondait avec une réponse.
Javascript
// Filename - 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:> 'GeeksForGeeks welcomes you !!'> ,> > });> > }> > render() {> > return> (> > > > Greetings Portal> > > > {> /* Set click handler */> }> > this.updateState}>Cliquez-moi ! ); } } exporter l'application par défaut ;> |
Étape pour exécuter l'application : Exécutez l'application à l'aide de la commande suivante depuis le répertoire racine du projet :
npm start
Sortir: Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000/ , vous verrez le résultat suivant :
Approche 2 : Mise à jour de plusieurs attributs
L'objet d'état d'un composant peut contenir plusieurs attributs et React permet d'utiliser la fonction setState() pour mettre à jour uniquement un sous-ensemble de ces attributs, ainsi que d'utiliser plusieurs méthodes setState() pour mettre à jour chaque valeur d'attribut indépendamment.
Nous définissons notre état initial en initialisant trois attributs différents, puis nous créons une fonction état de mise à jour() qui met à jour sa valeur à chaque fois qu'il est appelé. Encore une fois, cette fonction est déclenchée en tant que événement onClick et nous obtenons en même temps les valeurs mises à jour de nos états.
Javascript
// Filename - 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> (> > > > Test Portal> > > > > > > > {> /* Set click handler */> }> > this.updateState}>Cliquez-moi ! ); } } exporter l'application par défaut ;> |
Étape pour exécuter l'application : Exécutez l'application à l'aide de la commande suivante depuis le répertoire racine du projet :
npm start
Sortir: Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000/ , vous verrez le résultat suivant :
Approche 3 : Mise à jour des valeurs d'état à l'aide d'accessoires.
Nous configurons un tableau de chaînes sujets de test comme accessoires pour notre composant. Une fonction listeDeSujets est créé pour mapper toutes les chaînes en tant qu'éléments de liste dans notre état les sujets . La fonction état de mise à jour est déclenché et définit les sujets pour répertorier les éléments. Lorsque nous cliquons sur le bouton, nous obtenons les valeurs d'état mises à jour. Cette méthode est bien connue pour gérer des données complexes et mettre à jour l’état très facilement.
Javascript
// Filename - 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> (> > > > > {> this> .props.testTopics.map((topic) =>(> > {topic}> > ))}> > > > );> > }> > updateState() {> > // Changing state> > this> .setState({> > testName:> 'Test topics are:'> ,> > topics:> this> .listOfTopics(),> > });> > }> > render() {> > return> (> > > > Test Information> > > > > > {> /* Set click handler */> }> > this.updateState}>Cliquez-moi ! ); } } exporter l'application par défaut ;> |
Étape pour exécuter l'application : Exécutez l'application à l'aide de la commande suivante depuis le répertoire racine du projet :
npm start
Sortir: Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000/ , vous verrez le résultat suivant :
Approche 4 : Mise à jour de l'état en utilisant sa valeur précédente.
Nous créons un état initial compter ayant une valeur de 0. La fonction état de mise à jour() incrémente la valeur actuelle de l'état de 1 à chaque fois qu'il est appelé. Cette fois, nous utilisons la méthode setState() dans une fonction fléchée en passant état précédent comme paramètre. La valeur actuelle de l'état est accessible avec prevState.stateName qui est incrémenté de 1 chaque fois que nous appuyons sur le bouton. Cette méthode est très utile lorsque nous définissons une valeur dans l'état de telle manière qu'elle dépend de sa valeur précédente. Par exemple , en basculant un booléen (vrai/faux) ou en incrémentant/décrémentant un nombre.
Javascript
// Filename - 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> (> > > > Click Counter> > > > {> /* Set click handler */> }> > this.updateState}>Cliquez-moi ! ); } } exporter l'application par défaut ;> |
Étape pour exécuter l'application : Exécutez l'application à l'aide de la commande suivante depuis le répertoire racine du projet :
npm start
Sortir: Maintenant, ouvrez votre navigateur et accédez à http://localhost:3000/ , vous verrez le résultat suivant :
