Tutoriel React Partie 15: Ateliers sur l'état des composants

Aujourd'hui, nous vous proposons de suivre deux cours pratiques sur l'utilisation de l'état des composants. En particulier, en effectuant les tâches d'aujourd'hui, vous pouvez non seulement mieux comprendre le concept de propriétés, mais aussi travailler sur le débogage des applications React dans lesquelles il y a des erreurs.



→ Partie 1: aperçu du cours, raisons de la popularité de React, ReactDOM et JSX
→ Partie 2: composants fonctionnels
→ Partie 3: fichiers composants, structure du projet
→ Partie 4: composants parent et enfant
→ Partie 5: début des travaux sur une application TODO, les bases du style
→ Partie 6: sur certaines fonctionnalités du cours, JSX et JavaScript
→ Partie 7: styles en ligne
→ Partie 8: poursuite des travaux sur l'application TODO, familiarité avec les propriétés des composants
→ Partie 9: propriétés des composants
→ Partie 10: Atelier sur l'utilisation des propriétés et du style des composants
→ Partie 11: génération de balisage dynamique et méthode des tableaux de cartes
→ Partie 12: atelier, troisième étape de travail sur une application TODO
→ Partie 13: composants basés sur les classes
→ Partie 14: atelier sur les composants basés sur les classes, état des composants
→ Partie 15: ateliers santé composante
→ Partie 16: quatrième étape de travail sur une application TODO, gestion d'événements
→ Partie 17: cinquième étape de travail sur une application TODO, modifiant l'état des composants
→ Partie 18: la sixième étape de travail sur une application TODO
→ Partie 19: méthodes du cycle de vie des composants
Partie 20: la première leçon de rendu conditionnel
→ Partie 21: deuxième leçon et atelier sur le rendu conditionnel
→ Partie 22: la septième étape des travaux sur une application TODO, téléchargement de données depuis des sources externes
→ Partie 23: première leçon sur l'utilisation des formulaires
→ Partie 24: Deuxième leçon sur les formulaires
→ Partie 25: Atelier sur l'utilisation des formulaires
→ Partie 26: architecture d'application, modèle de conteneur / composant
→ Partie 27: projet de cours

Leçon 27. Atelier. Débogage de l'état des composants

→ Original

▍Emploi

Analysez le code de classe App ci-dessous à partir du fichier App.js d'une application React standard créée par create-react-app . Ce code est incomplet, il contient des erreurs.

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

Le composant App basé sur une classe n'a pas de constructeur, son état n'est pas initialisé, mais lors de la formation de ce qu'il retourne, cela implique qu'il a un état avec quelques données.

Votre tâche consiste à mettre ce code dans un état utilisable.

Si vous rencontrez un certain message d'erreur que vous ne connaissez pas - ne vous précipitez pas pour chercher la solution. Essayez par exemple de lire attentivement le code et de rechercher des informations sur le problème sur Internet, recherchez la cause de l'erreur et corrigez-la. Le débogage de code est une compétence précieuse dont vous aurez certainement besoin pour travailler sur de vrais projets.

▍Solution

Le corps d'une classe est similaire au corps d'un composant fonctionnel. Il contient uniquement la commande return , mais dans les composants basés sur des classes, cette commande est utilisée dans la méthode render() et non dans le corps de la classe. Réparez-le.

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Si nous continuons l'analyse du code, en regardant les messages d'erreur affichés dans le navigateur, nous pouvons comprendre que bien que la construction de la class App extends Component semble tout à fait normale, il y a toujours quelque chose qui ne va pas avec ce que nous appelons le nom de Component . Le problème est que dans la commande d'importation, import React from "react" , nous importons uniquement React , mais pas Component , dans le projet. Autrement dit, nous devons soit éditer cette commande, l'amener au formulaire d' import React, {Component} from "react" , puis lors de la création de la classe, nous pouvons utiliser le code existant, ou réécrire la déclaration de classe sous cette forme: la class App extends React.Component . Nous nous concentrerons sur la première option. Maintenant, le code du composant ressemble à ceci:

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Certes, les problèmes ne s'arrêtent pas là. L'application ne fonctionne pas, un message d'erreur TypeError: Cannot set property 'props' of undefined apparaît dans le navigateur TypeError: Cannot set property 'props' of undefined , nous sommes informés que quelque chose ne va pas avec la première ligne de la déclaration de classe.

Le point ici est que lors de la déclaration d'un composant, qui, comme nous l'avons déjà compris, est un composant basé sur une classe, une paire de parenthèses apparaît après le nom de la classe parent. Ils ne sont pas nécessaires ici, ce n'est pas un composant fonctionnel, nous allons donc nous en débarrasser. Maintenant, le code d'application s'avère plus ou moins exploitable, le composant basé sur la classe ne semble plus complètement faux, mais le système continue de nous signaler des erreurs. Maintenant, le message d'erreur ressemble à ceci: TypeError: Cannot read property 'name' of null . De toute évidence, il fait référence à une tentative d'utilisation de données stockées dans un état de composant qui n'a pas encore été initialisé. Par conséquent, nous allons maintenant créer un constructeur de classe sans oublier d'y appeler super() , et initialiser l'état du composant en lui ajoutant des valeurs avec lesquelles le composant essaie de fonctionner.

Voici le code de travail terminé pour le composant App :

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

Voici à quoi ressemblera la page d'application dans un navigateur.


Page d'application dans le navigateur

Leçon 28. Atelier. État des composants, travailler avec des données stockées dans l'état

→ Original

Dans cette session de pratique, vous aurez une autre chance de travailler avec l'état des composants.

▍Emploi

Voici le code du composant fonctionnel. Sur cette base, procédez comme suit:

1. Transformez-le pour que le composant ait un état.
2. L'état du composant doit avoir la propriété isLoggedIn , qui stocke la valeur logique true si l'utilisateur est connecté, et false cas contraire (dans notre cas, il n'y a pas de mécanisme de "connexion" ici, la valeur correspondante doit être définie manuellement, lorsque l'état est initialisé).
3. Essayez de vous assurer que si l'utilisateur est connecté, le composant You are currently logged in texte que You are currently logged in et sinon, le texte que You are currently logged out . Cette tâche est facultative, si vous rencontrez des difficultés dans sa mise en œuvre, vous pouvez, par exemple, rechercher des idées sur Internet.

Voici le code du fichier App.js :

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

▍Solution

Nous avons un composant fonctionnel à notre disposition. Pour le doter d'un état, il doit être transformé en composant basé sur la classe et initialiser son état. Voici à quoi ressemble le code du composant converti:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

Vérifiez l'intégrité de l'application.


Application dans le navigateur

En fait, si vous avez vous-même atteint ce point, cela signifie que vous avez appris le matériel dans le cours consacré aux composants en fonction des classes et de l'état des composants. Nous allons maintenant nous engager dans une tâche facultative.

Essentiellement, ce que nous devons faire pour terminer cette tâche sera discuté dans une leçon qui se concentre sur le rendu conditionnel, nous allons donc ici un peu plus loin. Donc, nous allons déclarer et initialiser une variable qui contiendra ou non la chaîne in fonction de ce qui est stocké dans la isLoggedIn état isLoggedIn . Nous travaillerons avec cette variable dans la méthode render() , en analysant d'abord les données et en y écrivant la valeur souhaitée, puis en l'utilisant dans le code JSX renvoyé par le composant. Voici ce que nous avons fini avec:

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

Veuillez noter que la variable wordDisplay est une variable locale ordinaire déclarée dans la méthode render() , donc, pour y accéder à l'intérieur de cette méthode, il vous suffit de spécifier son nom.

Voici à quoi ressemblera la page d'application:


Page d'application dans le navigateur

La isLoggedIn état isLoggedIn définie sur true , de sorte que le texte que You are currently logged in s'affiche sur la page. Pour afficher le texte You are currently logged out vous devez changer, dans le code du composant, la valeur de isLoggedIn en false .

Il convient de noter que ce problème peut être résolu d'autres manières. Mais le code que nous avons obtenu est clair et efficace, nous allons donc nous y attarder, bien que, par exemple, étant donné que isLoggedIn est une variable logique, la condition if (this.state.isLoggedIn === true) peut être réécrite comme if (this.state.isLoggedIn) .

Résumé

Aujourd'hui, vous vous êtes exercé à travailler avec l'état des composants, en particulier à corriger des erreurs dans le code, à transformer un composant fonctionnel en un composant basé sur des classes et à effectuer un rendu conditionnel. La prochaine fois, vous aurez un autre travail pratique et un nouveau sujet.

Chers lecteurs! Avez-vous réussi à trouver et à corriger vous-même toutes les erreurs en effectuant le premier des travaux pratiques présentés ici?