State Updates are Merged

[ngminhtrung]

Câu hỏi: Phần dưới này có nói đến vụ "the merging is shallow", @hungHoangDang với @duc110789 có hiểu nó là gì không? và nên dịch như thế nào?

---

When you call setState(), React merges the object you provide into the current state. For example, your state may contain several independent variables:

  constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

Then you can update them independently with separate setState() calls:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

The merging is shallow, so this.setState({comments}) leaves this.state.posts intact, but completely replaces this.state.comments.

[duc110789]

Như này đúng ko bác? @ngminhtrung

• React lưu trữ đối tượng state của nó thành object (chứa nhiều thành phần nhỏ là các attribute)
• Khi sử dụng setState, react sẽ chỉ overwrite lại 1 thành phần trong object state, mà ko ghi đè lên toàn bộ state
• Như vậy bạn có thể dùng nhiều hàm setState độc lập, cùng thời điểm, vì 1 lần setState nó chỉ ghi đè lên đúng thành phần trong state mà bạn muốn, các thành phần khác trong state giữ nguyên, ko bị ảnh hưởng

Nhưng nó là thuật ngữ thì chắc ko nên dịch anh ạ

[ngminhtrung]

Quên mất, bài này là từ https://reactjs.org/docs/state-and-lifecycle.html

@duc110789 , @hungHoangDang

[ngminhtrung]

@duc110789 : à, anh hỏi xem mọi người có để ý thuật ngữ shallow copy với deep copy hay không. Cái merge này là một dạng shallow copy. Anh hiểu nhưng ko biết dịch ntn.

[ghun131]

Sorry vừa rôi em chưa đọc kỹ, lúc đọc xong bản docs gốc thì em nghĩ thế này:

The merging is shallow nghĩa là cái khả năng hợp nhất của setState() nông nên nó chỉ có thể hợp nhất 1 biến với state nên họ update nó lần lượt như đoạn code này ạ:

  componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

Em cũng không chắc em hiểu đúng không. Các anh bảo thêm ạ.