Cập nhật đối tượng trong State

Mutation (biến đổi) là gì?

Bạn có thể lưu trữ bất kỳ một giá trị Javascript nào trong một state.

const [x, setX] = useState(0);

Đến nay, bạn đã làm việc với numbers, strings và booleans. Những loại giá trị JavaScript này là “immutable”, có nghĩa là không thể thay đổi hoặc “chỉ đọc” (read-only). Bạn có thể kích hoạt một lần re-render để thay thế một giá trị:

setX(5);

State x đã thay đổi từ 0 thành 5, nhưng số 0 bản thân nó không thay đổi. Trong Javascript, chúng ta không thể thay đổi những giá trị nguyên thuỷ (primitive) như numbers, strings, và booleans.

Bây giờ, hãy xem xét một object trong state:

const [position, setPosition] = useState({ x: 0, y: 0 });

Về mặt kỹ thuật, chúng ta có thể thay đổi nội dung của bản thân một đối tượng một cách trực tiếp. Đây được gọi là biến đổi (mutation)

position.x = 5;

Tuy nhiên, mặc dù về mặt kỹ thuật, những đối tượng trong React state có thể biến đổi (mutable), bạn vẫn nên giả định chúng là không biến đổi (immutable) giống như numbers, booleans và strings. Thay vì biến đổi chúng, bạn nên thay thế chúng.

Xem state như là chỉ đọc (read-only)

Nói cách khác, bạn nên xem xét bất kỳ đối tượng Javascript nào mà bạn đặt vào state như là chỉ đọc (read-only).

Trong ví dụ này, một đối tượng được lưu trữ trong state để thể hiện vị trí hiện tại của con trỏ chuột. Điểm màu đỏ đáng lẽ ra sẽ di chuyển khi bạn chạm hoặc di chuyển con trỏ qua khu vực preview. Nhưng thay vì vậy, điểm màu đỏ vẫn nằm ở vị trí ban đầu của nó.

Vấn đề nằm ở đoạn code này:

onPointerMove={e => {
  position.x = e.clientX;
  position.y = e.clientY;
}}

Đoạn code này đang sửa đổi (mutate) đối tượng được gán cho biến position từ lần render trước đó. Nhưng không sử dụng hàm state setting function, nên React không biết rằng object đó đã thay đổi. Do đó, React không làm gì cả để phản ứng với sự thay đổi này. Điều đó giống như cố thay đổi order sau khi bạn đã ăn xong bữa ăn. Mặc dù việc biến đổi state có thể hoạt động trong một số trường hợp, nhưng chúng tôi không khuyến khích việc này. Bạn nên xem xét giá trị state mà bạn có quyền truy cập trong một lần render là chỉ đọc (read-only).

Để thực sự kích hoạt một lần re-render trong trường hợp này, hãy tạo một object mới và truyền nó vào trong hàm state setting function.

onPointerMove={e => {
  setPosition({
    x: e.clientX,
    y: e.clientY
  });
}}

Với setPosition, bạn đang nói với React rằng:

• Thay thế position với đối tượng mới này
• Và re-render component này

Hãy để ý cách mà điểm màu đó đi theo con trỏ chuột của bạn khi bạn chạm hoặc di chuyển qua vùng preview:

position.x = e.clientX;
position.y = e.clientY;

const nextPosition = {};
nextPosition.x = e.clientX;
nextPosition.y = e.clientY;
setPosition(nextPosition);

setPosition({
  x: e.clientX,
  y: e.clientY
});

Sao chép những đối tượng với cú pháp spread

Trong ví dụ trước, đối tượng position luôn được tạo mới từ vị trí hiện tại của con trỏ chuột. Nhưng thường thì, bạn sẽ muốn kèm theo dữ liệu hiện có như một phần của đối tượng mới mà bạn đang tạo ra. Ví dụ, bạn có lẽ muốn update chỉ một field trong một form, nhưng giữ những giá trị trước đó cho tất cả các field còn lại.

Những field input này không hoạt động bởi vì những hàm xử lý onChange biến đổi trực tiếp state này:

Ví dụ, dòng này biến đổi state từ lần render trước đó:

person.firstName = e.target.value;

Cách đáng tin cậy để đạt được behavior bạn muốn đó là tạo ra một đối tượng mới và truyền nó vào trong hàm setPerson. Nhưng ở đây, bạn cũng muốn sao chép dữ liệu hiện có vào nó bởi vì chỉ một trong các fields đã thay đổi:

setPerson({
  firstName: e.target.value, // Giá trị first name mới từ input
  lastName: person.lastName,
  email: person.email
});

Bạn có thể sử dụng cú pháp ... phân tán đối tượng để bạn không phải sao chép mọi thuộc tính của đối tượng một cách riêng rẽ.

setPerson({
  ...person, // sao chép những trường input cũ
  firstName: e.target.value // Nhưng ghi đè trường này
});

Bây giờ thì form này hoạt động!

Hãy để ý cách bạn không khai báo một biến state riêng rẽ cho mỗi trường input. Đối với những form lớn, việc gộp tất cả dữ liệu trong một đối tượng là rất thuận tiện—miễn là bạn update nó một cách chính xác.

Hãy chú ý rằng cú pháp phân tán (spread) ... là “nông”—nó chỉ sao chép sâu một level. Điều này giúp cho việc sao chép diễn ra nhanh chóng, nhưng đồng nghĩa với việc nếu bạn muốn update một thuộc tính được lồng ghép (nested), bạn sẽ phải sử dụng nó hơn một lần.

import { useState } from 'react';

export default function Form() {
  const [person, setPerson] = useState({
    firstName: 'Barbara',
    lastName: 'Hepworth',
    email: 'bhepworth@sculpture.com'
  });

  function handleChange(e) {
    setPerson({
      ...person,
      [e.target.name]: e.target.value
    });
  }

  return (
    <>
      <label>
        First name:
        <input
          name="firstName"
          value={person.firstName}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          name="lastName"
          value={person.lastName}
          onChange={handleChange}
        />
      </label>
      <label>
        Email:
        <input
          name="email"
          value={person.email}
          onChange={handleChange}
        />
      </label>
      <p>
        {person.firstName}{' '}
        {person.lastName}{' '}
        ({person.email})
      </p>
    </>
  );
}

Update một đối tượng lồng ghép (nested object)

Xem xét một cấu trúc đối tượng lồng ghép nhau như sau:

const [person, setPerson] = useState({
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
});

Nếu bạn muốn update person.artwork.city, thật rõ ràng cách làm nó với biến đổi (mutation):

person.artwork.city = 'New Delhi';

Nhưng trong React, bạn xem xét state là immutable! Để thay đổi city, bạn cần trước tiên tạo ra đối tượng artwork mới (được điền trước bằng dữ liệu từ đối tượng trước đó), và sau đó tạo ra đối tượng person mới trỏ đến artwork mới vừa tạo:

const nextArtwork = { ...person.artwork, city: 'New Delhi' };
const nextPerson = { ...person, artwork: nextArtwork };
setPerson(nextPerson);

Hoặc được viết như việc gọi một hàm duy nhất:

setPerson({
  ...person, // sao chép những trường khác
  artwork: { // nhưng thay thế thuộc tính artwork
    ...person.artwork, // với artwork trước đó
    city: 'New Delhi' // nhưng ở New Delhi
  }
});

Đoạn code trên hơi dài dòng, nhưng nó hoạt động tốt cho nhiều trường hợp:

let obj = {
  name: 'Niki de Saint Phalle',
  artwork: {
    title: 'Blue Nana',
    city: 'Hamburg',
    image: 'https://i.imgur.com/Sd1AgUOm.jpg',
  }
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj1 = {
  title: 'Blue Nana',
  city: 'Hamburg',
  image: 'https://i.imgur.com/Sd1AgUOm.jpg',
};

let obj2 = {
  name: 'Niki de Saint Phalle',
  artwork: obj1
};

let obj3 = {
  name: 'Copycat',
  artwork: obj1
};

Viết ngắn gọn logic của việc update state với Immer

Nếu state của bạn có cấu trúc lồng ghép sâu, bạn có lẽ muốn xem xét việc làm phẳng nó. Tuy nhiên, nếu bạn không muốn thay đổi cấu trúc state của mình, bạn có lẽ sẽ ưa thích một cách viết rút gọn, hơn là nested spreads. Immer là một thư viện phổ biến không những cho phép bạn viết bằng cú pháp thuận tiện nhưng biến đổi mà còn chịu trách nhiệm tạo ra các bản sao cho bạn. Với Immer, code bạn viết trông giống như bạn đang “phá vỡ các quy tắc” và biến đổi một đối tượng:

updatePerson(draft => {
  draft.artwork.city = 'Lagos';
});

Nhưng không giống với một mutation thông thường, nó không ghi đè state trước đó!

Để thử nghiệm Immer:

1. Chạy npm install use-immer để thêm Immer vào như một dependency
2. Sau đó thay thế import { useState } from 'react với import { useImmer } from 'use-immer'

Dưới đây là ví dụ ở trên được chuyển sang Immer:

Hãy chú ý, việc viết những hàm xử lý sự kiện trở nên ngắn gọn hơn nhiều. Bạn có thể pha trộn useState và useImmer trong cùng một component một cách thoải mái. Immer là một cách tuyệt vời để giữ các hàm xử lý update ngắn gọn, đặc biệt là nếu có sự lồng ghép nhau trong state của bạn, và việc sao chép các đối tượng dẫn đến code lặp đi lặp lại.