Visi React komponentai gali turėti a valstybė susijusi su jais. Komponento būsena gali pasikeisti dėl atsako į vartotojo atliktą veiksmą arba dėl sistemos suaktyvinto įvykio. Kaskart pasikeitus būsenai, „React“ iš naujo pateikia komponentą naršyklei. Prieš atnaujindami būsenos vertę, turime sukurti pradinę būsenos sąranką. Baigę tai naudoti, naudojame setState() metodas pakeisti valstybės objektą. Tai užtikrina, kad komponentas buvo atnaujintas, ir reikalauja iš naujo pateikti komponentą.

Turinys

• Reaguoti JS setState
• „React“ programos kūrimo veiksmai:
• Kelių atributų atnaujinimas
• Būsenos verčių atnaujinimas naudojant rekvizitus.
• Būsenos atnaujinimas naudojant ankstesnę vertę.

Reaguoti JS setState

setState yra asinchroninis skambutis reiškia, kad jei iškviečiamas sinchroninis skambutis, jis gali būti neatnaujintas tinkamu laiku, pavyzdžiui, norint sužinoti esamą objekto vertę po atnaujinimo naudojant setState, konsolėje gali nepateikti dabartinės atnaujintos vertės. Norint gauti tam tikrą sinchroninį elgesį, vietoj objekto reikia perduoti funkciją setState.

Sintaksė:

Galime naudoti setState(), norėdami pakeisti komponento būseną tiesiogiai arba naudodami rodyklės funkciją.

setState({ stateName : updatedStateValue }) // OR setState((prevState) =>({ stateName: prevState.stateName + 1 })) 

„React“ programos kūrimo veiksmai:

1 žingsnis: Sukurkite „React“ programą naudodami šią komandą:

npx create-react-app foldername 

2 žingsnis: Sukūrę projekto aplanką, ty aplanko pavadinimą, perkelkite į jį naudodami šią komandą:

cd foldername 

Projekto struktūra:

1 metodas: Atnaujinamas vienas atributas

Viduje nustatome pradinę būsenos vertę konstruktoriaus funkcija ir sukurti kitą funkciją updateState() valstybės atnaujinimui. Dabar, kai spustelėjame mygtuką, pastarasis suaktyvinamas kaip an onClick įvykis kuri keičia valstybės vertę. Mes atliekame setState() metodą mūsų updateState() funkcija rašant:

this.setState({greeting : 'GeeksForGeeks welcomes you !!'}) 

Kaip matote, mes perduodame objektą setState(). Šiame objekte yra būsenos, kurią norime atnaujinti, dalis, kuri šiuo atveju yra reikšmė pasisveikinimas . React paima šią reikšmę ir sujungia ją su objektu, kuriam to reikia. Lygiai taip pat, kaip mygtuko komponentas klausia, ką jis turėtų naudoti atnaujindamas pasisveikinimo reikšmę, o setState() atsako su atsakymu.

Javascript

>   
 
     
 
      Programos paleidimo veiksmas:     Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo:  
  
npm start 
  
    Išvestis:     Dabar atidarykite naršyklę ir eikite į       http://localhost:3000/       , pamatysite šią išvestį:  
  
  
  
    2 metodas:     Kelių atributų atnaujinimas  
  
 Komponento būsenos objekte gali būti keli atributai, o „React“ leidžia naudojant funkciją setState() atnaujinti tik tų atributų poaibį, taip pat naudojant kelis setState() metodus, kad būtų atnaujinta kiekviena atributo reikšmė atskirai.  
  
 Pradinę būseną nustatome inicijuodami tris skirtingus atributus, tada sukuriame funkciją     updateState()     kuri atnaujina savo vertę, kai tik iškviečiama. Dar kartą ši funkcija suaktyvinama kaip an      onClick įvykis      ir tuo pačiu gauname atnaujintas savo būsenų vertes.  
  
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}>Paspausk mane!       );  } } eksportuoti numatytąją programą;>>  
  
  
  
  
 
     
 
  
>   
 
     
 
      Programos paleidimo veiksmas:     Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo:  
  
npm start 
  
    Išvestis:     Dabar atidarykite naršyklę ir eikite į       http://localhost:3000/       , pamatysite šią išvestį:  
  
  
  
    3 metodas:     Būsenos verčių atnaujinimas naudojant rekvizitus.  
  
 Mes nustatome eilučių masyvą     testo temos     kaip mūsų komponento rekvizitai. Funkcija     temų sąrašas     sukurtas siekiant susieti visas eilutes kaip sąrašo elementus mūsų valstybėje     temomis     . Funkcija     atnaujinimo būsena     suaktyvinamas ir nustatomos temos į elementų sąrašą. Kai paspaudžiame mygtuką, gauname atnaujintas būsenos reikšmes. Šis metodas yra gerai žinomas dėl sudėtingų duomenų tvarkymo ir labai lengvo būsenos atnaujinimo.  
  
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>   >  >  
 {>  this>  .state.testName}>  
  >  >  
 {>  this>  .state.topics}>  
  >  {>  /* Set click handler */>  }>   >   this.updateState}>Paspausk mane!       );  } } eksportuoti numatytąją programą;>>  
  
  
  
  
 
     
 
  
>   
 
     
 
      Programos paleidimo veiksmas:     Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo:  
  
npm start 
  
    Išvestis:     Dabar atidarykite naršyklę ir eikite į       http://localhost:3000/       , pamatysite šią išvestį:  
  
  
  
    4 metodas:     Būsenos atnaujinimas naudojant ankstesnę vertę.  
  
 Mes sukuriame pradinę būseną     skaičiuoti     kurių reikšmė 0. Funkcija     updateState()     padidina dabartinę būsenos vertę 1, kai tik ji iškviečiama. Šį kartą mes naudojame setState() metodą rodyklės funkcijoje perduodant     prevState     kaip parametras. Dabartinė būsenos vertė pasiekiama naudojant     prevState.stateName     kuris padidinamas 1, kai tik paspaudžiame mygtuką. Šis metodas yra tikrai naudingas, kai nustatome būsenos reikšmę taip, kad ji priklausytų nuo ankstesnės vertės.     Pavyzdžiui     , perjungdami loginį reikšmę (tiesa / klaidinga) arba padidindami / sumažindami skaičių.  
  
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}>Paspausk mane!       );  } } eksportuoti numatytąją programą;>>  
  
  
  
  
 
     
 
  
>   
 
     
 
      Programos paleidimo veiksmas:     Paleiskite programą naudodami šią komandą iš projekto šakninio katalogo:  
  
npm start 
  
    Išvestis:     Dabar atidarykite naršyklę ir eikite į       http://localhost:3000/       , pamatysite šią išvestį: