Wszystkie komponenty React mogą mieć państwo z nimi związane. Stan komponentu może ulec zmianie w wyniku reakcji na akcję wykonaną przez użytkownika lub zdarzenia wywołanego przez system. Za każdym razem, gdy stan się zmienia, React ponownie renderuje komponent w przeglądarce. Przed aktualizacją wartości stanu musimy zbudować konfigurację stanu początkowego. Kiedy już to zrobimy, używamy metoda setState(). aby zmienić obiekt stanu. Zapewnia, że komponent został zaktualizowany i wymaga ponownego wyrenderowania komponentu.
Spis treści
- Zareaguj na JS setState
- Kroki tworzenia aplikacji React:
- Aktualizowanie wielu atrybutów
- Aktualizowanie wartości stanu za pomocą właściwości.
- Aktualizacja stanu przy użyciu jego poprzedniej wartości.
Zareaguj na JS setState
stan zestawu jest wywołaniem asynchronicznym, co oznacza, że jeśli zostanie wywołane wywołanie synchroniczne, może nie zostać zaktualizowane we właściwym czasie, na przykład w przypadku poznania bieżącej wartości obiektu po aktualizacji za pomocą setState, może nie dać aktualnie zaktualizowanej wartości na konsoli. Aby uzyskać pewne zachowanie synchroniczne, należy przekazać funkcję zamiast obiektu do setState.
Składnia:
Możemy użyć setState() do bezpośredniej zmiany stanu komponentu, a także za pomocą funkcji strzałkowej.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({stateName: prevState.stateName + 1 }))> Kroki tworzenia aplikacji React:
Krok 1: Utwórz aplikację React za pomocą następującego polecenia:
polecenie dotykowe w systemie Linux
npx create-react-app foldername>
Krok 2: Po utworzeniu folderu projektu, tj. nazwa_folderu, przejdź do niego za pomocą następującego polecenia:
cd foldername>
Struktura projektu:
Podejście 1: Aktualizowanie pojedynczego atrybutu
Wewnątrz ustawiamy wartość stanu początkowego funkcja konstruktora i utwórz kolejną funkcję stan aktualizacji() do aktualizacji stanu. Teraz, gdy klikniemy przycisk, ten ostatni zostanie uruchomiony jako zdarzenie onClick co zmienia wartość stanu. Wykonujemy metodę setState() w naszym funkcję updateState(). przez pisanie:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> Jak widać przekazujemy obiekt do metody setState(). Obiekt ten zawiera część stanu, którą chcemy zaktualizować, czyli w tym przypadku wartość Powitanie . React pobiera tę wartość i łączy ją z obiektem, który jej potrzebuje. To tak, jakby komponent przycisku pytał, czego powinien użyć do aktualizacji wartości powitania, a setState() odpowiada, podając odpowiedź.
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}>Kliknij! ); } } eksportuj domyślną aplikację;> |
>
>
Amisza Patel
Krok, aby uruchomić aplikację: Uruchom aplikację za pomocą następującego polecenia z katalogu głównego projektu:
npm start>
Wyjście: Teraz otwórz przeglądarkę i przejdź do http://localhost:3000/ , zobaczysz następujące dane wyjściowe:
Podejście 2: Aktualizowanie wielu atrybutów
Obiekt stanu komponentu może zawierać wiele atrybutów, a React umożliwia użycie funkcji setState() do aktualizacji tylko podzbioru tych atrybutów, a także użycie wielu metod setState() do niezależnej aktualizacji każdej wartości atrybutu.
Ustawiamy nasz stan początkowy inicjując trzy różne atrybuty, a następnie tworzymy funkcję stan aktualizacji() który aktualizuje swoją wartość przy każdym wywołaniu. Po raz kolejny ta funkcja zostaje wywołana jako zdarzenie onClick i jednocześnie otrzymujemy zaktualizowane wartości naszych stanów.
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}>Kliknij! ); } } eksportuj domyślną aplikację;> |
>
>
Krok, aby uruchomić aplikację: Uruchom aplikację za pomocą następującego polecenia z katalogu głównego projektu:
npm start>
Wyjście: Teraz otwórz przeglądarkę i przejdź do http://localhost:3000/ , zobaczysz następujące dane wyjściowe:
Podejście 3: Aktualizowanie wartości stanu za pomocą właściwości.
Ustawiamy tablicę stringów Tematy testowe jako rekwizyty dla naszego komponentu. Funkcja lista tematów jest tworzony w celu mapowania wszystkich ciągów znaków jako elementów listy w naszym stanie tematy . Funkcja stan aktualizacji zostaje wywołany i ustawia tematy na listę elementów. Po kliknięciu przycisku otrzymujemy zaktualizowane wartości stanu. Ta metoda jest dobrze znana z obsługi złożonych danych i bardzo łatwej aktualizacji stanu.
wartość logiczna Java na ciąg
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}>Kliknij! ); } } eksportuj domyślną aplikację;> |
>
rzuć ciąg na int
>
Krok, aby uruchomić aplikację: Uruchom aplikację za pomocą następującego polecenia z katalogu głównego projektu:
npm start>
Wyjście: Teraz otwórz przeglądarkę i przejdź do http://localhost:3000/ , zobaczysz następujące dane wyjściowe:
Podejście 4: Aktualizacja stanu przy użyciu jego poprzedniej wartości.
Tworzymy stan początkowy liczyć mający wartość 0. Funkcja stan aktualizacji() zwiększa obecną wartość stanu o 1 przy każdym wywołaniu. Tym razem używamy metody setState() w funkcji strzałkowej poprzez przekazanie poprzedniStan jako parametr. Dostęp do bieżącej wartości stanu uzyskuje się za pomocą prevState.stateName która zwiększa się o 1 za każdym razem, gdy naciśniemy przycisk. Metoda ta jest bardzo przydatna, gdy ustawiamy wartość w stanie w taki sposób, aby była ona zależna od jej poprzedniej wartości. Na przykład , przełączanie wartości logicznej (prawda/fałsz) lub zwiększanie/zmniejszanie liczby.
JavaScript
rzutowane na string
// 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}>Kliknij! ); } } eksportuj domyślną aplikację;> |
>
>
Krok, aby uruchomić aplikację: Uruchom aplikację za pomocą następującego polecenia z katalogu głównego projektu:
npm start>
Wyjście: Teraz otwórz przeglądarkę i przejdź do http://localhost:3000/ , zobaczysz następujące dane wyjściowe:
