Bereaksi useStateKait

React useStateHook memungkinkan kita untuk melacak status dalam komponen fungsi.

Status umumnya mengacu pada data atau properti yang perlu dilacak dalam suatu aplikasi.

Impor useState

Untuk menggunakan useStateHook, pertama-tama kita perlu importmemasukkannya ke dalam komponen kita.

import { useState } from "react";

Perhatikan bahwa kami sedang mendestrukturisasi useStatedari reactkarena ini adalah ekspor bernama.

Inisialisasi useState

Kami menginisialisasi status kami dengan memanggil useStatekomponen fungsi kami.

useState menerima keadaan awal dan mengembalikan dua nilai:

• Keadaan saat ini.
• Fungsi yang memperbarui status.

import { useState } from "react";

function FavoriteColor() {
  const [color, setColor] = useState("");
}

Perhatikan bahwa sekali lagi, kami merusak nilai yang dikembalikan dari useState.

Nilai pertama, color, adalah status kita saat ini.

Nilai kedua, setColor, adalah fungsi yang digunakan untuk memperbarui status kita.

Terakhir, kami menetapkan status awal ke string kosong: useState("")

Baca Negara

Kami sekarang dapat memasukkan status kami di mana saja di komponen kami.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return <h1>My favorite color is {color}!</h1>
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Perbarui Status

Untuk memperbarui status kami, kami menggunakan fungsi pembaru status kami.

import { useState } from "react";
import ReactDOM from "react-dom";

function FavoriteColor() {
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<FavoriteColor />, document.getElementById('root'));

Apa yang Dapat Ditahan Negara?

Hook useStatedapat digunakan untuk melacak string, angka, boolean, array, objek, dan kombinasi dari semuanya!

Kita dapat membuat beberapa Kait status untuk melacak nilai individual.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [brand, setBrand] = useState("Ford");
  const [model, setModel] = useState("Mustang");
  const [year, setYear] = useState("1964");
  const [color, setColor] = useState("red");

  return (
    <>
      <h1>My {brand}</h1>
      <p>
        It is a {color} {model} from {year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Atau, kita bisa menggunakan satu status dan memasukkan objek saja!

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Memperbarui Objek dan Array dalam Status

Saat status diperbarui, seluruh status akan ditimpa.

Bagaimana jika kita hanya ingin memperbarui warna mobil kita?

Jika kami hanya menelepon setCar({color: "blue"}), ini akan menghapus merek, model, dan tahun dari negara bagian kami.

Kita dapat menggunakan operator penyebaran JavaScript untuk membantu kita.

import { useState } from "react";
import ReactDOM from "react-dom";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

ReactDOM.render(<Car />, document.getElementById('root'));

Karena kita membutuhkan nilai keadaan saat ini, kita melewatkan sebuah fungsi ke dalam setCarfungsi kita. Fungsi ini menerima nilai sebelumnya.

Kami kemudian mengembalikan objek, menyebarkan previousStatedan menimpa hanya warnanya.

import { useState } from "react";

function KeepCount() {
  const [, ] = useState(0);
}