Làm cách nào để cập nhật phần tử bên trong Danh sách với ImmutableJS?

Đây là những gì tài liệu chính thức nói

updateIn(keyPath: Array<any>, updater: (value: any) => any): List<T>
updateIn(keyPath: Array<any>, notSetValue: any, updater: (value: any) => any): List<T>
updateIn(keyPath: Iterable<any, any>, updater: (value: any) => any): List<T>
updateIn(keyPath: Iterable<any, any>, notSetValue: any, updater: (value: any) => any): List<T>

Không có cách nào nhà phát triển web bình thường (không phải lập trình viên chức năng) sẽ hiểu điều đó!

Tôi có trường hợp khá đơn giản (đối với phương pháp không chức năng).

var arr = [];
arr.push({id: 1, name: "first", count: 2});
arr.push({id: 2, name: "second", count: 1});
arr.push({id: 3, name: "third", count: 2});
arr.push({id: 4, name: "fourth", count: 1});
var list = Immutable.List.of(arr);

Làm thế nào tôi có thể cập nhật listnơi phần tử với tên thứ ba có nó đếm các thiết lập để 4 ?

Trường hợp thích hợp nhất là sử dụng cả hai findIndexvà updatephương pháp.

list = list.update(
  list.findIndex(function(item) { 
    return item.get("name") === "third"; 
  }), function(item) {
    return item.set("count", 4);
  }
); 

PS Không phải lúc nào cũng có thể sử dụng Bản đồ. Ví dụ: nếu tên không phải là duy nhất và tôi muốn cập nhật tất cả các mục có cùng tên.

Với .setIn () bạn có thể làm tương tự:

let obj = fromJS({
  elem: [
    {id: 1, name: "first", count: 2},
    {id: 2, name: "second", count: 1},
    {id: 3, name: "third", count: 2},
    {id: 4, name: "fourth", count: 1}
  ]
});

obj = obj.setIn(['elem', 3, 'count'], 4);

Nếu chúng tôi không biết chỉ mục của mục chúng tôi muốn cập nhật. Thật dễ dàng để tìm thấy nó bằng cách sử dụng .findIndex () :

const indexOfListToUpdate = obj.get('elem').findIndex(listItem => {
  return listItem.get('name') === 'third';
});
obj = obj.setIn(['elem', indexOfListingToUpdate, 'count'], 4);

Hy vọng nó giúp!

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

Giải trình

Cập nhật các bộ sưu tập Immutable.js luôn trả về các phiên bản mới của các bộ sưu tập đó không thay đổi bản gốc. Do đó, chúng tôi không thể sử dụng list[2].count = 4cú pháp đột biến của JavaScript . Thay vào đó, chúng ta cần gọi các phương thức, giống như chúng ta có thể làm với các lớp bộ sưu tập Java.

Hãy bắt đầu với một ví dụ đơn giản hơn: chỉ đếm trong một danh sách.

var arr = [];
arr.push(2);
arr.push(1);
arr.push(2);
arr.push(1);
var counts = Immutable.List.of(arr);

Bây giờ nếu chúng tôi muốn cập nhật mục thứ 3, một mảng JS đơn giản có thể trông như : counts[2] = 4. Vì chúng ta không thể sử dụng đột biến và cần gọi một phương thức, thay vào đó chúng ta có thể sử dụng: counts.set(2, 4)- điều đó có nghĩa là đặt giá trị 4tại chỉ mục 2.

Cập nhật sâu

Ví dụ bạn đưa ra có dữ liệu lồng nhau mặc dù. Chúng tôi không thể chỉ sử dụng set()trên bộ sưu tập ban đầu.

Các bộ sưu tập của Immutable.js có một nhóm các phương thức có tên kết thúc bằng "In" cho phép bạn thực hiện các thay đổi sâu hơn trong một tập hợp lồng nhau. Hầu hết các phương pháp cập nhật phổ biến đều có phương thức "Trong" liên quan. Ví dụ cho setcó setIn. Thay vì chấp nhận một chỉ mục hoặc khóa làm đối số đầu tiên, các phương thức "Trong" này chấp nhận "đường dẫn chính". Đường dẫn khóa là một mảng các chỉ mục hoặc khóa minh họa cách lấy giá trị bạn muốn cập nhật.

Trong ví dụ của bạn, bạn muốn cập nhật mục trong danh sách ở chỉ mục 2, và sau đó giá trị tại khóa "đếm" trong mục đó. Vì vậy, con đường chính sẽ là [2, "count"]. Tham số thứ hai cho setInphương thức hoạt động giống như set, đó là giá trị mới mà chúng tôi muốn đặt ở đó, vì vậy:

list = list.setIn([2, "count"], 4)

Tìm đúng đường dẫn chính

Đi thêm một bước nữa, bạn thực sự nói rằng bạn muốn cập nhật mục có tên là "ba" , khác với mục thứ 3. Ví dụ: có thể danh sách của bạn không được sắp xếp hoặc có thể có mục "hai" đã bị xóa trước đó? Điều đó có nghĩa là trước tiên chúng ta cần đảm bảo rằng chúng ta thực sự biết đường dẫn chính xác! Để làm điều này, chúng ta có thể sử dụng findIndex()phương thức (bằng cách này, hoạt động gần như chính xác như Array # find Index ).

Khi chúng tôi đã tìm thấy chỉ mục trong danh sách có mục chúng tôi muốn cập nhật, chúng tôi có thể cung cấp đường dẫn chính đến giá trị chúng tôi muốn cập nhật:

var index = list.findIndex(item => item.name === "three")
list = list.setIn([index, "count"], 4)

NB: SetvsUpdate

Câu hỏi ban đầu đề cập đến các phương thức cập nhật hơn là các phương thức thiết lập. Tôi sẽ giải thích đối số thứ hai trong hàm đó (được gọi updater), vì nó khác với set(). Trong khi đối số thứ hai set()là giá trị mới mà chúng ta muốn, thì đối số thứ hai update()là hàm chấp nhận giá trị trước đó và trả về giá trị mới mà chúng ta muốn. Sau đó, updateIn()là biến thể "Trong" update()chấp nhận đường dẫn chính.

Ví dụ: chúng tôi muốn một biến thể của ví dụ của bạn không chỉ đặt số đếm thành 4, mà thay vào đó, tăng số đếm hiện có, chúng tôi có thể cung cấp một hàm thêm một giá trị vào giá trị hiện có:

var index = list.findIndex(item => item.name === "three")
list = list.updateIn([index, "count"], value => value + 1)

Đây là những gì tài liệu chính thức nói updateIn

Bạn không cần updateIn, chỉ dành cho các cấu trúc lồng nhau. Bạn đang tìm kiếm updatephương thức có chữ ký và tài liệu đơn giản hơn nhiều:

Trả về một Danh sách mới có giá trị được cập nhật tại chỉ mục với giá trị trả về của trình cập nhật cuộc gọi với giá trị hiện có hoặc not setValue nếu chỉ mục không được đặt.

update(index: number, updater: (value: T) => T): List<T>
update(index: number, notSetValue: T, updater: (value: T) => T): List<T>

mà, như các Map::updatetài liệu đề xuất, là " tương đương với:list.set(index, updater(list.get(index, notSetValue))) ".

trong đó phần tử có tên "thứ ba"

Đó không phải là cách danh sách hoạt động. Bạn phải biết chỉ mục của yếu tố mà bạn muốn cập nhật hoặc bạn phải tìm kiếm nó.

Làm cách nào tôi có thể cập nhật danh sách trong đó phần tử có tên thứ ba được đặt thành 4?

Điều này nên làm điều đó:

list = list.update(2, function(v) {
    return {id: v.id, name: v.name, count: 4};
});

Sử dụng .map ()

list = list.map(item => 
   item.get("name") === "third" ? item.set("count", 4) : item
);

var arr = [];
arr.push({id: 1, name: "first", count: 2});
arr.push({id: 2, name: "second", count: 1});
arr.push({id: 3, name: "third", count: 2});
arr.push({id: 4, name: "fourth", count: 1});
var list = Immutable.fromJS(arr);

var newList = list.map(function(item) {
    if(item.get("name") === "third") {
      return item.set("count", 4);
    } else {
      return item;
    }
});

console.log('newList', newList.toJS());

// More succinctly, using ES2015:
var newList2 = list.map(item => 
    item.get("name") === "third" ? item.set("count", 4) : item
);

console.log('newList2', newList2.toJS());

<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.js"></script>

Tôi thực sự thích cách tiếp cận này từ trang web của thomastuts :

const book = fromJS({
  title: 'Harry Potter & The Goblet of Fire',
  isbn: '0439139600',
  series: 'Harry Potter',
  author: {
    firstName: 'J.K.',
    lastName: 'Rowling'
  },
  genres: [
    'Crime',
    'Fiction',
    'Adventure',
  ],
  storeListings: [
    {storeId: 'amazon', price: 7.95},
    {storeId: 'barnesnoble', price: 7.95},
    {storeId: 'biblio', price: 4.99},
    {storeId: 'bookdepository', price: 11.88},
  ]
});

const indexOfListingToUpdate = book.get('storeListings').findIndex(listing => {
  return listing.get('storeId') === 'amazon';
});

const updatedBookState = book.setIn(['storeListings', indexOfListingToUpdate, 'price'], 6.80);

return state.set('book', updatedBookState);

Bạn có thể sử dụng map:

list = list.map((item) => { 
    return item.get("name") === "third" ? item.set("count", 4) : item; 
});

Nhưng điều này sẽ lặp đi lặp lại trên toàn bộ bộ sưu tập.