Wie aktualisiert man ein Feld in Array von Json-Objekten?

Question

Ich mache reactjs, also muss ich ein Feld in away aktualisieren, das den Statuswechsel auslöst.

Ich habe diese Nutzlast (zeige nur 1, aber es ist ein Array von vielen)

[ 
       { 
        id: 1, 
        name: "Fridge2", 
        selected: true, 
        sharingId: 'ae9b9566-3b5c-4772-a0a1-07ed8b354b8f', 
        sharingWith: ["jim@hotmail.com", "jim2@hotmail.com"], 
        storageItems: [ 
         { 
          id: 'ae9b9564-3b5c-2711-a421-07ed8b354b8f', 
          name: 'Chicken Breats', 
          qty: 10, 
          expiresOn: '3', 
          category: 'Meat', 
          categoryId: 'BDEC0494-B16E-411B-8E32-A64A00E943F8', 
          unitType: 'Pieces', 
          unitTypeId: '63CDB076-C20D-4DC5-A181-A64A00E94409' 
         }, 
         { 
          id: 'ae9b9566-3b5c-2711-a4a1-07ed8b354b8f', 
          name: 'Chicken Breats2', 
          qty: 10, 
          expiresOn: '0', 
          category: 'Meat', 
          categoryId: 'BDEC0494-B16E-411B-8E32-A64A00E943F8', 
          unitType: 'Pieces', 
          unitTypeId: '63CDB076-C20D-4DC5-A181-A64A00E94409' 
         }, 
         { 
          id: 'ae9b9566-3b5c-2712-a0a1-07ed8b354b8f', 
          name: 'Chicken Breats3', 
          qty: 10, 
          expiresOn: '4', 
          category: 'Meat', 
          categoryId: 'BDEC0494-B16E-411B-8E32-A64A00E943F8', 
          unitType: 'Pieces', 
          unitTypeId: '63CDB076-C20D-4DC5-A181-A64A00E94409' 
         } 
        ] 
       } 
] 

Ich möchte StorageItem finden, die eine ID übereinstimmt 'ae9b9564-3b5c-2711-a421-07ed8b354b8f' (erste eine in der Reihe)

Ich möchte es dann herausnehmen update das a-Feld (sprich Menge) kleben Sie es zurück und haben eine Zustandsänderung passieren.

Das war mein sehr schlechter 1. Versuch es zu tun. Es funktioniert nicht

case actions.STORAGE_ITEM_USED: { 
      var foundItem = state.selectedStorage.storageItems.filter(i => i.id == action.payload); 
      var newQty = foundItem[0].qty - 1; 
      foundItem[0].qty = newQty; 
      var nonChangedStorageItem = state.selectedStorage.storageItems.filter(i => i.id != action.payload); 

      var allItems = nonChangedStorageItem.concat(foundItem); 
      state.selectedStorage.storageItems = allItems; 

      return { 
       selectedStorage: state.selectedStorage, 
      } 

     } 

bearbeiten

Ich habe das jetzt, aber ich sehe eine neue mögliche Antwort, die ich

var newSelectedStorage = Object.assign({} , state.selectedStorage); 

    var foundItem = newSelectedStorage.storageItems.filter(x => x.id == action.payload); 
    foundItem[0].qty = foundItem[0].qty - 1; 

    var nonChangedItems = newSelectedStorage.storageItems.filter(x => x.id != action.payload); 

    newSelectedStorage.storageItems = nonChangedItems.concat(foundItem); 

webpack.config.js

module.exports = { 
    devtool: 'inline-source-map', 
    entry: "./app/index.js", 
    output: { 
    path: __dirname + '/dist', 
    filename: "bundle.js" 
    }, 
    devServer: { 
    contentBase: "./app", 
    inline: true, 
    port: 3333 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     loader: 'babel-loader', 
     exclude: /node_modules/, 
     query: { 
      presets: ['es2015', 'react'] 
     } 
     }, 
     { 
     test: /\.scss$/, 
     loaders: ['style', 'css', 'sass'] 
     }, 
     { 
     test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/, 
     loader: 'url-loader' 
     } 
    ] 
    }, 
    externals: { 
    jquery: 'jQuery' 
    }, 
} 

Answer 1

Kasse wird Mit dem Aussehen versuchen Sie, die qty Eigenschaft auf alle übereinstimmenden Objekte inzu verringern.

Da Redux ein ganz neues Objekt braucht, können wir ES6 der Betreiber Objekt Ausbreitung verwenden, um ein neues Objekt zurück mit den meisten der Werte bereits ausgefüllt.

case actions.STORAGE_ITEM_USED: 
    return { 
     ...state, 
     selectedStorage: state.selectedStorage.storageItems.map(i => { 
      if (i.id != action.payload) return i; 
      return { 
       ...i, 
       qty: i.qty - 1 
      } 
     }) 
    } 

kann ich nicht testen, ob das funktioniert, aber Die Idee ist, dass wir ein neues Objekt zurückgeben, vorhandene Zustandsobjekte kopieren und dann selectedStorage mit einem neuen Array überschreiben, in dem nur Objekte, deren id s action.payloadqty Eigenschaften sind, verringert werden.