不変性ヘルパーで配列の各値を変更する

Question

immutability helperを使用して、オブジェクトの配列内の各値を変更するのがベストプラクティスであることを理解するのは難しいです。私は私の状態でこれを持っているとしたら例えば

、：

this.state = { 
    items: [ 
     { 
      name: "test", 
      subItems: [ 
       {val: false}, {val: true}, {val: false} 
      ] 
     }, 
     { 
      name: "test2", 
      subItems: [ 
       {val: true}, {val: true}, {val: false} 
      ] 
     } 
    ] 
} 

そして、私はすべてのvalfalseに設定したい、私はそれをどのように行うかもしれません。

私は一度それを1つずつ行うことができますが、より良い方法がなければならない：

let elements = update(this.state.items, { 
    [idx1]:{ 
    subItems:{ 
     [idx2]:{ 
     val: { 
      $set: false 
     } 
     } 
    } 
    } 
}); 

Answer 1

それは確かに可能ですが、それは一目で読めるか理解できるが、すべてのものです。

const nextState = update(state, { 
    items: { 
    $apply: (items) => { 
     return items.map(item => { 
     return update(item, { 
      subItems: { 
      $apply: (subItems) => { 
       return subItems.map(subItem => { 
       return update(subItem, { 
        val: { 
        $set: false 
        } 
       }) 
       }) 
      } 
      } 
     }) 
     }) 
    } 
    } 
}); 

Answer 2

ES6の不変性を持つソリューション、destructuringなしヘルパーについては、この

this.state = { 
    items: [ 
     { 
      name: "test", 
      subItems: [ 
       {val: false}, {val: true}, {val: false} 
      ] 
     }, 
     { 
      name: "test2", 
      subItems: [ 
       {val: true}, {val: true}, {val: false} 
      ] 
     } 
    ] 
} 

使用関数型プログラミング

this.state.items 
.filter((item) => item.name === test).subitems 
.map((subItem) => { 
    subitem.forEach((key) => { 
    { [key]: !subitem[key] } 

}) 
}) 

Answer 3

を試してみてください。

this.setState({ 
    // This is if you have other state besides items. 
    ...this.state, 
    items: this.state.items.map(item => ({ 
    ...item, 
    subItems: item.subItems.map(subItem => ({ 
     ...subItem, 
     val: false // or e.g. setter as a function of (item, subItem) 
    })) 
    })) 
}); 

が私の目に簡単ですそのn更新ヘルパー。