React Training, Teil 15: Workshops zum Arbeiten mit dem Komponentenzustand

Ursprünglicher Autor: Bob Ziroll
  • Übersetzung
  • Tutorial
Heute bieten wir Ihnen zwei praktische Kurse an, um mit dem Zustand der Komponenten zu arbeiten. Wenn Sie die heutigen Aufgaben erledigen, können Sie nicht nur das Konzept der Eigenschaften besser verstehen, sondern auch fehlerhafte React-Anwendungen debuggen. → Teil 1: Kursübersicht, Gründe für die Popularität von React, ReactDOM und JSXTeil 2: FunktionskomponentenTeil 3: Komponentendateien, ProjektstrukturTeil 4: Eltern- und KindkomponentenTeil 5: Beginn der Arbeit an einer TODO-Anwendung, Grundlagen des StilsTeil 6: Einige Funktionen des Kurses, JSX und JavaScriptTeil 7: Inline-Stile

Bild








Teil 8: Fortsetzung der Arbeit an einer TODO-Anwendung, Kenntnis der Eigenschaften von Bauteilen
Teil 9: Eigenschaften von Bauteilen
Teil 10: Ein Workshop zum Arbeiten mit Eigenschaften von Bauteilen und Styling
Teil 11: Dynamische Bildung von Markups und der Array-Methodenkarte
Teil 12: Workshop, Dritter Stufe Richtung TODO-Anwendung
Teil 13: Komponenten basierend auf Klassen
Part 14: Workshop an den Komponenten, basierend auf Klassen Körperkomponenten
Teil 15: Workshops mit Komponenten Zustand arbeiten
16 Teil: vierter Stufe in Richtung TODO Attached essen, Event - Handling
Teil 17: Fünfter Teil der Arbeit an der TODO-Anwendung, Änderung des Zustands der Komponenten
Teil 18: Sechster Teil der Arbeit an der TODO-Anwendung
Teil 19: Methoden des Komponentenlebenszyklus
Teil 20: Erste Lektion zum bedingten Rendern
Teil 21: Zweite Lektion und Workshop zum bedingten Rendern
Teil 22: Die siebte Phase der Arbeit an einer TODO-Anwendung, Laden von Daten aus externen Quellen
Teil 23: Die erste Sitzung zum Arbeiten mit Formularen
Teil 24: Die zweite Sitzung zum Arbeiten mit Formularen
Teil 25: Ein Workshop zum Arbeiten mit Formularen
Teil 26: Anwendungsarchitektur Behälter / Komponente
Teil 27: Kursprojekt

Lektion 27. Workshop. Komponentenstatus, Debugging


Original

▍Job


Analysieren Sie den folgenden Klassencode Appaus der App.jsvon den Tools erstellten Standard-React-Anwendungsdatei create-react-app. Dieser Code ist unvollständig und fehlerhaft.

import React from"react"classAppextendsComponent() {
    return (
        <div>
            <h1>{this.state.name}</h1>
            <h3><fontcolor="#3AC1EF">▍{this.state.age} years old</font></h3>
        </div>
    )    
}
exportdefault App

Eine Appauf einer Klasse basierende Komponente hat keinen Konstruktor, ihr Status wird nicht initialisiert, aber wenn sie das bildet, was sie zurückgibt, bedeutet dies, dass sie einen Status mit einigen Daten hat.

Ihre Aufgabe ist es, diesen Code in einen funktionsfähigen Zustand zu bringen.

Wenn Sie auf eine unbekannte Fehlermeldung stoßen, beeilen Sie sich nicht, die Lösung zu untersuchen. Probieren Sie es selbst aus, lesen Sie den Code sorgfältig durch, suchen Sie im Internet nach Informationen zu dem Problem, ermitteln Sie die Fehlerursache und beheben Sie den Fehler. Das Debuggen von Code ist eine wertvolle Fähigkeit, die sich bei der Arbeit an realen Projekten auf jeden Fall als nützlich erweisen wird.

Entscheidung


Der Körper einer Klasse ähnelt dem Körper einer Funktionskomponente. Es hat nur einen Befehl return, aber in klassenbasierten Komponenten wird dieser Befehl in der Methode render()und nicht im Hauptteil der Klasse verwendet. Repariere es.

import React from"react"classAppextendsComponent() {
    render() {
        return (
            <div>
                <h1>{this.state.name}</h1>
                <h3><fontcolor="#3AC1EF">▍{this.state.age} years old</font></h3>
            </div>
        )    
    }
}
exportdefault App

Wenn Sie den Code weiter analysieren und die im Browser angezeigten Fehlermeldungen betrachten, können Sie verstehen, dass, obwohl das Design class App extends Componentganz normal aussieht, bei dem, worauf wir uns beim Namen beziehen Component, immer noch etwas nicht stimmt. Das Problem ist, dass import React from "react"wir im Import-Befehl nur in das Projekt importieren React, aber nicht Component. Das heißt, wir müssen den Befehl entweder bearbeiten, es in dem Sinne zu bringen import React, {Component} from "react", dann , wenn Sie eine Klasse erstellen, können wir bestehenden Code verwenden, oder schreiben Sie die Klassendeklaration der Form: class App extends React.Component. Wir werden uns auf die erste Option konzentrieren. Nun sieht der Komponentencode so aus:

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

Es stimmt, dieses Problem endet nicht dort. Die Anwendung funktioniert nicht, es erscheint eine Fehlermeldung im Browser TypeError: Cannot set property 'props' of undefined, wir werden informiert, dass etwas mit der ersten Zeile der Klassendeklaration nicht stimmt.

Hier geht es darum, dass beim Deklarieren einer Komponente, die, wie wir bereits verstanden haben, auf einer Klasse basiert, nach dem Namen der übergeordneten Klasse ein Paar Klammern steht. Sie werden hier nicht benötigt, dies ist keine funktionale Komponente, daher werden wir sie loswerden. Jetzt ist der Anwendungscode mehr oder weniger effizient, die klassenbasierte Komponente sieht nicht mehr ganz falsch aus, aber das System meldet uns weiterhin Fehler. Nun sieht die Fehlermeldung so aus:TypeError: Cannot read property 'name' of null. Offensichtlich bezieht es sich auf einen Versuch, Daten zu verwenden, die in einem Komponentenzustand gespeichert sind, der noch nicht initialisiert wurde. Daher erstellen wir jetzt einen Klassenkonstruktor, erinnern uns daran, ihn aufzurufen super(), initialisieren den Status der Komponente und fügen ihm die Werte hinzu, mit denen die Komponente zu arbeiten versucht.

Hier ist der Code der fertigen Arbeitskomponente App:

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

So sieht die Anwendungsseite in einem Browser aus.


Anwendungsseite im Browser

Sitzung 28. Workshop. Der Status der Komponenten, die mit den im Status gespeicherten Daten arbeiten


Original

In dieser praktischen Lektion haben Sie erneut die Möglichkeit, mit dem Zustand der Komponenten zu arbeiten.

▍Job


Unten finden Sie den Funktionskomponentencode. Gehen Sie auf dieser Grundlage folgendermaßen vor:

  1. Konvertieren Sie es so, dass die Komponente einen Status hat.
  2. Im Status der Komponente muss eine Eigenschaft vorhanden sein isLoggedIn, die einen logischen Wert speichert, truewenn der Benutzer angemeldet ist. Andernfalls false(in unserem Fall gibt es hier keine Anmeldemechanismen) muss der entsprechende Wert manuell festgelegt werden, wenn der Status initialisiert wird.
  3. Versuchen Sie , stellen Sie sicher , dass, wenn der Benutzer in das System eingegeben, um die Komponente Text angezeigt werden You are currently logged in, und wenn nicht - dann den Text You are currently logged out. Diese Aufgabe ist optional. Wenn Sie Schwierigkeiten bei der Ausführung haben, können Sie beispielsweise im Internet nach Ideen suchen.

Hier ist der Dateicode App.js:

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

Entscheidung


Wir verfügen über eine Funktionskomponente. Um ihn mit einem Status auszustatten, muss er auf der Grundlage der Klasse in eine Komponente konvertiert und mit seinem Status initialisiert werden. Hier ist der Code für die konvertierte Komponente:

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

Überprüfen Sie die Leistung der Anwendung.


Anwendung im Browser

Wenn Sie selbst an diesem Punkt angelangt sind, bedeutet dies, dass Sie das Kursmaterial für Komponenten basierend auf den Klassen und dem Status der Komponenten gelernt haben. Jetzt machen wir eine optionale Aufgabe.

Im Wesentlichen werden wir in einer Lektion, die dem bedingten Rendern gewidmet ist, erläutern, was getan werden muss, um diese Aufgabe abzuschließen. Hier sind wir also einen kleinen Schritt voraus. Wir werden also eine Variable deklarieren und initialisieren, die eine Zeichenfolge enthältinoder davonabhängt,outwas in der Eigenschaft state gespeichert istisLoggedIn. Wir werden mit dieser Variablen in der Methode arbeitenrender()Analysieren Sie zuerst die Daten und notieren Sie den gewünschten Wert und verwenden Sie ihn dann im von der Komponente zurückgegebenen JSX-Code. Dies ist, was wir am Ende mit:

import React from"react"classAppextendsReact.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>
        )
    }
}
exportdefault App

Beachten Sie, dass eine Variable wordDisplayeine reguläre lokale Variable ist, die in einer Methode deklariert ist. render()Um innerhalb dieser Methode darauf zuzugreifen, müssen Sie lediglich ihren Namen angeben.

So sieht die Bewerbungsseite jetzt aus:


Die Anwendungsseite im Browser

Die Eigenschaft state istisLoggedInauf einen Wert festgelegttrue, sodass Text auf der Seite angezeigt wirdYou are currently logged in. Um den Text anzuzeigenYou are currently logged out, müssen Sie im Komponentencode den WertisLoggedInaufändernfalse.

Es ist zu beachten, dass dieses Problem auf andere Weise gelöst werden kann. Der Code, den wir erhalten haben, ist jedoch klar und funktionsfähig, sodass wir damit aufhören werden. Da es sich jedoch beispielsweiseisLoggedInum eine logische Variable handelt, kann die Bedingungif (this.state.isLoggedIn === true)wiefolgtumgeschrieben werdenif (this.state.isLoggedIn):

Ergebnisse


Heute haben Sie geübt, mit dem Status von Komponenten zu arbeiten. Insbesondere haben Sie Fehler in Ihrem Code behoben, die funktionale Komponente in eine Komponente überarbeitet, die auf Klassen basiert, und das bedingte Rendern durchgeführt. Das nächste Mal warten Sie auf eine weitere praktische Arbeit und ein neues Thema.

Sehr geehrte Leser! Haben Sie es geschafft, alle Fehler selbst zu finden und zu korrigieren, indem Sie das erste der hier vorgestellten praktischen Arbeiten durchgeführt haben?


Jetzt auch beliebt: