Bài 4. State và hook

Khái niệm và lý thuyết

Mỗi lần component được vẽ (render), React gọi lại hàm component với dữ liệu hiện tại. Biến thường trong hàm bị tạo lại mỗi lần, vì vậy dữ liệu muốn "nhớ" qua các lần vẽ phải để trong state. Gọi hàm cập nhật (như setN) báo cho React vẽ lại component với giá trị mới. Cập nhật state là bất biến: với mảng và đối tượng phải tạo bản mới thay vì sửa tại chỗ.

Hook là hàm đặc biệt bắt đầu bằng use. useState lưu trạng thái; useEffect chạy hiệu ứng phụ (gọi API, đăng ký sự kiện, đổi tiêu đề) sau khi vẽ xong, và chạy lại khi các giá trị trong mảng phụ thuộc đổi. Mảng rỗng [] nghĩa là chỉ chạy một lần khi component xuất hiện. Hai luật của hook: chỉ gọi ở cấp cao nhất của component và chỉ gọi trong component hoặc hook khác.

Khi hai component cần chia sẻ dữ liệu, ta nâng state lên component cha chung và truyền xuống bằng props.

useState

import { useState } from "react";

function BoDem() {
  const [n, setN] = useState(0);
  return (
    <div>
      <p>Đã bấm: {n}</p>
      <button onClick={() => setN(n + 1)}>Tăng</button>
      <button onClick={() => setN(0)}>Đặt lại</button>
    </div>
  );
}

Không sửa trực tiếp n; luôn gọi hàm setN. Với đối tượng và mảng, tạo bản sao mới: setDs([...ds, moi]).

Biểu mẫu có kiểm soát

function Loc() {
  const [tu, setTu] = useState("");
  const ds = ["Python", "React", "Git"];
  const kq = ds.filter(x => x.toLowerCase().includes(tu.toLowerCase()));
  return (
    <>
      <input value={tu} onChange={e => setTu(e.target.value)} placeholder="Tìm..." />
      <ul>{kq.map(x => <li key={x}>{x}</li>)}</ul>
    </>
  );
}

useEffect gọi API

import { useState, useEffect } from "react";

function BaiViet() {
  const [ds, setDs] = useState([]);
  const [dangTai, setDangTai] = useState(true);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts?_limit=5")
      .then(r => r.json())
      .then(d => { setDs(d); setDangTai(false); });
  }, []);            // [] = chỉ chạy một lần khi hiện ra

  if (dangTai) return <p>Đang tải...</p>;
  return <ul>{ds.map(b => <li key={b.id}>{b.title}</li>)}</ul>;
}

Nâng state lên

function Cha() {
  const [mau, setMau] = useState("xanh");
  return (
    <>
      <ChonMau mau={mau} doi={setMau} />
      <HienMau mau={mau} />
    </>
  );
}

Khi hai component cần dùng chung dữ liệu, đặt state ở component cha gần nhất rồi truyền xuống.