React – darbs ar kompleksajiem datiem iekš useState

 

React – darbs ar kompleksajiem datiem iekš useState

Šajā rakstā jūs uzzināsiet, kā izmantot objektus kā “steita” mainīgos, izmantojot useState. Jūs arī atklāsiet pareizo veidu, kā atjaunināt tikai konkrētus rekvizītus, piemēram, steita objektus un kāpēc tas tiek darīts. Tas tiks parādīts, izpētot, kas notiek, mainot virknes datu tipu uz objektu.

Stāvokļa turēšanas objektā un tā atjaunināšanas piemērs, pamatojoties uz lietotāja ģenerētiem notikumiem
Ja objektā ir nepieciešams saglabāt stāvokli un to atjaunināt, sākotnēji varat mēģināt kaut ko līdzīgu:

import { useState } from "react";
 
export default function App() {
  const [greeting, setGreeting] = useState({ greet: "Sveika Pasaule!" });
  console.log(greeting, setGreeting);
 
  function updateGreeting() {
    setGreeting({ greet: "Sveika plašā pasaule!" });
  }
 
  return (
    <div>
      <h1>{greeting.greet}</h1>
      <button onClick={updateGreeting}>Atjaunot sveicienu</button>
    </div>
  );
}

Lai gan tas darbojas, tas nav ieteicamais veids, kā strādāt ar “steita” objektiem programmā React, tas ir tāpēc, ka “steita” objektam parasti ir vairāk nekā viens rekvizīts, un ir nepieciešama visa objekta atjaunināšana tā vietā lai atjauninātu tikai nelielu daļu no tā.

 

Pareizais veids, kā atjaunināt “steita” objektu programmā React, izmantojot useState

Ieteicamā pieeja “steita” objekta atjaunināšanai programmā React, izmantojot useState, ir kopēt “steita” objektu un pēc tam atjaunināt kopiju.

Tas parasti ietver izkliedes operatora izmantošanu (…).

Paturot to prātā, šeit ir atjauninātais kods:

import { useState } from "react"; 
 
export default function App() { 
  const [greeting, setGreeting] = useState({ greet: "Sveika Pasaule!" }); 
  console.log(greeting, setGreeting); 
 
  function updateGreeting() { 
    const newGreeting = {...greeting}; 
    newGreeting.greet = "Sveika plašā pasaule!"; 
    setGreeting(newGreeting); 
  } 
 
  return ( 
    <div> 
      <h1>{greeting.greet}</h1> 
      <button onClick={updateGreeting}>Atjaunot sveicienu</button> 
    </div> 
  ); 
} 

NEPAREIZI veidi, kā mēģināt atjaunināt stāvokļa objektu (šādi darīt nevajadzētu)

Lai pierādītu, ka “steita” atjaunināšanai ir nepieciešama vecā “steita” objekta kopija, izpētīsim, kas notiek, mēģinot tieši atjaunināt vecā “steita” objektu:
import { useState } from“react”; 
exportdefaultfunctionApp() { 
const [greeting, setGreeting] = useState({ greet: “Sveika Pasaule” }); 
  console.log(greeting, setGreeting); 
function updateGreeting() { 
    greeting = {greet: “Sveika plašā pasaule!"}; 
    setGreeting(greeting); 
  } 
return ( 
    <div> 
      <h1>{greeting.greet}</h1> 
      <button onClick={updateGreeting}>Atjaunot sveicienu</button> 
    </div> 
  ); 
} 

Iepriekš minētais kods nedarbojas, jo tajā ir paslēpta TypeError.

Konkrēti, TypeError ir: “Piešķiršana konstantajam mainīgajam”.

Citiem vārdiem sakot, nevar atkārtoti piešķirt mainīgo, kas deklarēts, izmantojot const, piemēram, useState hook masīva destrukturēšanas gadījumā:

const [greeting, setGreeting] = useState({ greet: "Sveika Pasaule" }); 
Vēl viena pieeja, ko varētu mēģināt izmantot, lai apietu ieteikto “steita” atjaunināšanas veidu, strādājot ar “steita” objektu, varētu būt šāda:
import { useState } from"react"; 
exportdefaultfunctionApp() { 
const [greeting, setGreeting] = useState({ greet: "Sveika Pasaule" }); 
  console.log(greeting, setGreeting); 
function updateGreeting() { 
    greeting.greet = "Sveika plašā pasaule; 
    setGreeting(greeting); 
  } 
return ( 
    <div> 
      <h1>{greeting.greet}</h1> 
      <button onClick={updateGreeting}>Atjaunot sveicienu</button> 
    </div> 
  ); 
} 

Iepriekš minētais kods ir problemātisks, jo tas nerada kļūdas; tomēr tas arī neatjaunina virsrakstu, tāpēc tas nedarbojas pareizi. Tas nozīmē, ka neatkarīgi no tā, cik reižu noklikšķināsiet uz pogas “Atjaunināt sveicienu”, tas joprojām būs “Sveika, pasaule”.

Atkārtoti jāatkārto, ka pareizais veids, kā strādāt ar “steitu”, kad tas ir saglabāts kā objekts, ir:

  • Kopējiet vecā “steita” objektu, izmantojot spread (…) operatoru, un saglabājiet to jaunā mainīgajā un
  • Nododiet jauno mainīgo “steita” atjaunināšanas funkcijai

Steita objekta atjaunināšana, izmantojot bultiņu “arrow” funkcijas

Tagad “steita” atjaunināšanai izmantosim sarežģītāku objektu.

“steita” objektam tagad ir divi rekvizīti: sveiciens un atrašanās vieta.

Šī atjauninājuma mērķis ir parādīt, kā rīkoties, ja mainās tikai konkrēts “steita” objekta rekvizīts, vienlaikus saglabājot nemainīgus pārējos rekvizītus:

import { useState } from "react"; 
 
export default function App() { 
  const [greeting, setGreeting] = useState( 
    { 
        greet: "Sveika", 
        place: "Pasaule" 
    } 
  ); 
  console.log(greeting, setGreeting); 
 
  function updateGreeting() { 
    setGreeting(prevState => { 
        return {...prevState, place: "plašā pasaule"} 
    }); 
  } 
 
  return ( 
    <div> 
      <h1>{greeting.greet}, {greeting.place}</h1> 
      <button onClick={updateGreeting}>Atjaunot sveicienu</button> 
    </div> 
  ); 
} 
Iemesls, kāpēc tas darbojas, ir tāpēc, ka tiek izmantots iepriekšējais “steits”, kas tiek nosaukts par prevState, un šī ir sveiciena mainīgā iepriekšējā vērtība. Citiem vārdiem sakot, tas izveido objekta prevState kopiju un atjaunina tikai kopētā objekta vietas rekvizītu. Pēc tam tas atgriež pavisam jaunu objektu:
return {...prevState, place: "plašā pasaule"} 

Viss ir ietīts (wrapped) figūriekavās, lai šis jaunais objekts būtu pareizi uzbūvēts, un tas tiek atgriezts izsaucot “setGreeting“.

Secinājums

Jūs uzzinājāt, kas notiek, mainot virknes datu tipu uz objektu, ar piemēriem par objekta turēšanu steitā un tā atjaunināšanu, pamatojoties uz lietotāja ģenerētiem notikumiem. Jūs arī uzzinājāt par pareiziem un nepareiziem veidiem, kā atjaunināt steita objektu programmā React, izmantojot useState, un par steita objekta atjaunināšanu, izmantojot bultiņu funkcijas.

Loading

Noderīgs raksts? Dalies ar citiem:
Dalīties: