Cập nhật một trong các đối tượng trong mảng, theo cách bất biến

Question

Trong React's this.state Tôi có một thuộc tính được gọi là formErrors chứa các mảng đối tượng động sau đây.

[ 
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true}, 
    {fieldName: 'cityId', valid: false}, 
    {fieldName: 'hostDescription', valid: false}, 
] 

Hãy nói rằng tôi sẽ cần phải cập nhật đối tượng trạng thái của có fieldName cityId với giá trị hợp lệ true.

Cách dễ nhất hoặc phổ biến nhất để giải quyết vấn đề này là gì?

Tôi OK để sử dụng bất kỳ thư viện nào immutability-helper, immutable-js v.v. hoặc ES6. Tôi đã thử và googled này trong hơn 4 giờ, và vẫn không thể quấn quanh đầu của tôi. Sẽ rất biết ơn vì sự giúp đỡ nào đó.

Answer 1

Bạn có thể sử dụng map để lặp dữ liệu và kiểm tra sự fieldName, nếu fieldName là cityId thì bạn cần phải thay đổi giá trị và trả về một đối tượng mới nếu không chỉ cần return cùng object.

Viết nó như thế này:

var data = [ 
    {fieldName: 'title', valid: false}, 
    {fieldName: 'description', valid: true}, 
    {fieldName: 'cityId', valid: false}, 
    {fieldName: 'hostDescription', valid: false}, 
] 

var newData = data.map(el => { 
        if(el.fieldName == 'cityId') 
        return Object.assign({}, el, {valid:true}) 
        return el 
       }); 

this.setState({ data: newData }); 

Answer 2

Làm thế nào về immutability-helper? Hoạt động rất tốt. Bạn đang tìm kiếm lệnh $merge tôi nghĩ.

@FellowStranger: Tôi có một (và duy nhất một phần) trạng thái redux của tôi là một mảng các đối tượng. Tôi sử dụng các chỉ số trong giảm tốc để cập nhật các mục nhập chính xác:

case EMIT_DATA_TYPE_SELECT_CHANGE: 
    return state.map((sigmap, index) => { 
    if (index !== action.payload.index) { 
     return sigmap; 
    } else { 
     return update(sigmap, {$merge: { 
     data_type: action.payload.value 
     }}) 
    } 
}) 

Thẳng thắn mà nói, đây là loại dầu mỡ, và tôi có ý định thay đổi điều đó một phần của đối tượng trạng thái của tôi, nhưng nó làm việc ... Nó doesn' T âm thanh như bạn đang sử dụng redux nhưng chiến thuật nên được tương tự.

Answer 3

Thay vì lưu trữ giá trị của bạn trong một mảng, tôi đề nghị sử dụng một đối tượng thay vì vậy bạn có thể dễ dàng xác định những yếu tố bạn muốn cập nhật. Trong ví dụ dưới đây chính là fieldName nhưng nó có thể là bất kỳ định danh duy nhất:

var fields = { 
    title: { 
     valid: false 
    }, 
    description: { 
     valid: true 
    } 
} 

sau đó bạn có thể sử dụng update chức năng không thay đổi-helper của:

var newFields = update(fields, {title: {valid: {$set: true}}})