Toate componentele React pot avea un stat asociate acestora. Starea unei componente se poate modifica fie ca urmare a unui răspuns la o acțiune efectuată de utilizator, fie a unui eveniment declanșat de sistem. Ori de câte ori starea se schimbă, React redă din nou componenta în browser. Înainte de a actualiza valoarea stării, trebuie să construim o configurație inițială a stării. Odată ce am terminat cu el, folosim metoda setState(). pentru a schimba obiectul de stare. Se asigură că componenta a fost actualizată și solicită redarea din nou a componentei.
Cuprins
- Reacționează JS setState
- Pași pentru a crea aplicația React:
- Actualizarea mai multor atribute
- Actualizarea valorilor de stare folosind elemente de recuzită.
- Actualizarea stării folosind valoarea anterioară.
Reacționează JS setState
setState este un apel asincron înseamnă că, dacă un apel sincron este apelat, este posibil să nu fie actualizat la momentul potrivit, cum ar fi să cunoască valoarea curentă a unui obiect după o actualizare folosind setState, este posibil să nu dea valoarea actuală actualizată pe consolă. Pentru a obține un comportament sincron, trebuie să treceți funcția în loc de obiect la setState.
Sintaxă:
Putem folosi setState() pentru a schimba starea componentei direct, precum și printr-o funcție săgeată.
setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 }))> Pași pentru a crea aplicația React:
Pasul 1: Creați o aplicație React folosind următoarea comandă:
javafx
npx create-react-app foldername>
Pasul 2: După ce ați creat folderul proiectului, adică numele folderului, treceți la el utilizând următoarea comandă:
cd foldername>
Structura proiectului:
Abordarea 1: Se actualizează un singur atribut
Am stabilit valoarea noastră inițială de stare în interior funcția de constructor și creați o altă funcție updateState() pentru actualizarea statului. Acum, când facem clic pe butonul, acesta din urmă este declanșat ca un eveniment onClick care modifică valoarea stării. Efectuăm metoda setState() în sistemul nostru funcția updateState(). în scris:
this.setState({greeting : 'GeeksForGeeks welcomes you !!'})> După cum puteți vedea, trecem un obiect către setState(). Acest obiect conține partea din starea pe care dorim să o actualizăm, care, în acest caz, este valoarea căreia Salut . React ia această valoare și o îmbină în obiectul care are nevoie de ea. Este exact ca și cum componenta butonului întreabă ce ar trebui să folosească pentru actualizarea valorii salutului și setState() răspunde cu un răspuns.
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> >>
invata seleniul >{>/* Set click handler */>}> > this.updateState}>Click pe mine! ); } } exporta aplicația implicită;>>> |
>Pasul pentru rularea aplicației: Rulați aplicația folosind următoarea comandă din directorul rădăcină al proiectului: npm start>Ieșire: Acum deschideți browserul și accesați http://localhost:3000/ , veți vedea următoarea ieșire:
Abordarea 2: Actualizarea mai multor atribute
Obiectul de stare al unei componente poate conține mai multe atribute și React permite utilizarea funcției setState() pentru a actualiza doar un subset al acelor atribute, precum și utilizarea mai multor metode setState() pentru a actualiza fiecare valoare de atribut în mod independent.
Ne setăm starea inițială prin inițializarea a trei atribute diferite și apoi creăm o funcție updateState() care își actualizează valoarea ori de câte ori este apelată. Încă o dată, această funcție este declanșată ca un eveniment onClick și obținem valorile actualizate ale stărilor noastre în același timp.
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>>>
{>this>.state.test}>>>
{>this>.state.questions}>>>
{>this>.state.students}>>{>/* Set click handler */>}>>this.updateState}>Click pe mine! ); } } exporta aplicația implicită;>>>>Pasul pentru rularea aplicației: Rulați aplicația folosind următoarea comandă din directorul rădăcină al proiectului: npm start>Ieșire: Acum deschideți browserul și accesați http://localhost:3000/ , veți vedea următoarea ieșire:
Abordarea 3: Actualizarea valorilor de stare folosind elemente de recuzită.
Am configurat o serie de șiruri testSubiecte ca recuzită pentru componenta noastră. O functie listOfTopics este creat pentru a mapa toate șirurile ca elemente de listă în statul nostru subiecte . Functia updateState este declanșat și setează subiectele să listeze elemente. Când facem clic pe buton, obținem valori actualizate de stare. Această metodă este binecunoscută pentru manipularea datelor complexe și pentru actualizarea stării foarte ușor.
lup sau vulpeJavascript
cum se convertesc int în șir de caractere java
// 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>>>
{>this>.state.testName}>>>
{>this>.state.topics}>>{>/* Set click handler */>}>>this.updateState}>Click pe mine! ); } } exporta aplicația implicită;>>>>Pasul pentru rularea aplicației: Rulați aplicația folosind următoarea comandă din directorul rădăcină al proiectului: npm start>Ieșire: Acum deschideți browserul și accesați http://localhost:3000/ , veți vedea următoarea ieșire:
Abordarea 4: Actualizarea stării utilizând valoarea anterioară.
Creăm o stare inițială numara având valoarea 0. Funcţia updateState() crește valoarea actuală a stării cu 1 ori de câte ori este apelată. De data aceasta, folosim metoda setState() într-o funcție săgeată prin trecere prevState ca parametru. Valoarea curentă a stării este accesată cu prevState.stateName care este crescut cu 1 ori de câte ori apăsăm butonul. Această metodă este cu adevărat utilă atunci când setăm o valoare în stare în așa fel încât să depindă de valoarea anterioară. De exemplu , comutând un boolean (adevărat/fals) sau incrementând/decrementând un număr.
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>>>
>>You have clicked me {>this>.state.count}{>' '>}>>times.>>>>{>/* Set click handler */>}>>this.updateState}>Click pe mine! ); } } exporta aplicația implicită;>>>parse string la int>Pasul pentru rularea aplicației: Rulați aplicația folosind următoarea comandă din directorul rădăcină al proiectului: npm start>Ieșire: Acum deschideți browserul și accesați http://localhost:3000/ , veți vedea următoarea ieșire:
