如何更新Json对象数组中的一个字段

How to update one field in Array of Json Objects?

本文关键字：一个 字段 对象 何更新 更新 Json 数组      更新时间：2023-09-26

我正在做reactjs，所以我需要更新一个字段，这将触发状态变化。

我有这个负载(只显示1，但它是一个许多数组)

    [
                {
                    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'
                        }
                    ]
                }
]

我想找到与ID 'ae9b9564-3b5c-2711-a421-07ed8b354b8f'(数组中的第一个)匹配的storageItem

然后我想把它拿出来更新一个字段(比如qty)，把它放回去，并有一个状态变化发生。

这是我非常糟糕的第一次尝试。它不工作 
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,
            }
        }

编辑

我现在有这个，但是我看到一个新的可能的答案，我将签出

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'
  },
}

看起来，你是在试图减少state.selectedStorage.storageItems中任何匹配对象的qty属性。

由于Redux需要一个全新的对象，我们可以使用ES6的对象扩展操作符返回一个包含大部分已经填好的值的新对象。

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
            }
        })
    }

我无法测试这是否有效，但想法是我们正在返回一个新对象，复制现有状态对象，然后用一个新数组覆盖selectedStorage，其中只有id s匹配action.payload的qty属性的项目减少。

相关文章：