ตอบสนองuseStateตะขอ

React useStateHook ช่วยให้เราติดตามสถานะในองค์ประกอบของฟังก์ชันได้

สถานะโดยทั่วไปหมายถึงข้อมูลหรือคุณสมบัติที่จำเป็นต้องติดตามในแอปพลิเคชัน

นำเข้า useState

ในการใช้useStateHook ก่อนอื่นเราต้องimportใส่มันลงในส่วนประกอบของเรา

import { useState } from "react";

สังเกตว่าเรากำลังทำลาย โครงสร้าง useStateเนื่องจากreactเป็นการส่งออกที่มีชื่อ

เริ่มต้นuseState

เราเริ่มต้นสถานะของเราโดยการเรียกuseStateในองค์ประกอบฟังก์ชันของเรา

useStateยอมรับสถานะเริ่มต้นและส่งกลับค่าสองค่า:

• สถานะปัจจุบัน.
• ฟังก์ชันที่อัพเดตสถานะ

import { useState } from "react";

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

โปรดสังเกตว่า เรากำลังทำลายโครงสร้างค่าที่ส่งคืนจากuseState.

ค่าแรก, color, คือสถานะปัจจุบันของเรา

ค่าที่สองsetColorคือ fuction ที่ใช้ในการอัปเดตสถานะของเรา

สุดท้ายนี้ เราตั้งค่าสถานะเริ่มต้นเป็นสตริงว่าง:useState("")

อ่านสถานะ

ตอนนี้เราสามารถรวมสถานะของเราได้ทุกที่ในองค์ประกอบของเรา

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'));

อัพเดทสถานะ

ในการอัปเดตสถานะของเรา เราใช้ฟังก์ชันตัวอัปเดตสถานะ

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'));

สิ่งที่สามารถระบุได้

Hook สามารถuseStateใช้เพื่อติดตามสตริง ตัวเลข บูลีน อาร์เรย์ อ็อบเจ็กต์ และการรวมกันของสิ่งเหล่านี้!

เราสามารถสร้าง Hooks หลายสถานะเพื่อติดตามค่าแต่ละค่าได้

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'));

หรือเราสามารถใช้สถานะเดียวและรวมวัตถุแทนได้!

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'));

กำลังอัปเดตออบเจ็กต์และอาร์เรย์ในสถานะ

เมื่อสถานะถูกอัพเดต สถานะทั้งหมดจะถูกเขียนทับ

จะเกิดอะไรขึ้นถ้าเราต้องการอัพเดทสีรถของเราเท่านั้น?

ถ้าเราโทรไปเท่านั้นsetCar({color: "blue"})สิ่งนี้จะลบแบรนด์ รุ่น และปีออกจากรัฐของเรา

เราสามารถใช้ตัวดำเนินการกระจาย JavaScript เพื่อช่วยเราได้

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'));

เนื่องจากเราต้องการค่าสถานะปัจจุบัน เราจึงส่งฟังก์ชันเข้าไปในsetCarฟังก์ชัน ของเรา ฟังก์ชันนี้รับค่าก่อนหน้า

จากนั้นเราส่งคืนวัตถุ กระจายpreviousStateและเขียนทับเฉพาะสี

import { useState } from "react";

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