[英]How to update one field in Array of Json Objects?
I am doing reactjs so I need to update a field in away that will trigger state change. 我在做reactjs,所以我需要立即更新一个字段来触发状态更改。
I have this payload(only show 1 but it is an array of many) 我有这个有效载荷(只显示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'
}
]
}
]
I want to find storageItem that matches the an ID 'ae9b9564-3b5c-2711-a421-07ed8b354b8f' (first one in the array) 我想找到与ID'ae9b9564-3b5c-2711-a421-07ed8b354b8f'(数组中的第一个)匹配的storageItem
I then want to take it out update the a field(say qty) stick it back in and have a state change happen. 然后,我想将其取出来更新字段(例如,数量)并重新插入并发生状态更改。
This was my very bad 1st attemp at it. 这是我非常糟糕的第一次尝试。 It does not work 这是行不通的
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,
}
}
Edit 编辑
I have this now but I see a new possible answer that I will checkout 我现在有这个,但我看到了一个新的可能答案,我将结帐
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 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'
},
}
By the looks of it, you're trying to decrease the qty
property on any matching objects in state.selectedStorage.storageItems
. 从外观qty
,您正在尝试减少state.selectedStorage.storageItems
任何匹配对象的qty
属性。
Since Redux needs a whole new object, we can use ES6's object spread operators to return a new object with most of the values already filled in. 由于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
}
})
}
I can't test if this works, but the idea is that we are returning a new object, copying existing state objects, then overwriting selectedStorage
with a new array where only items whose id
s matching action.payload
's qty
properties are decreased. 我无法测试这种方法是否可行,但是我们的想法是,我们将返回一个新对象,复制现有状态对象,然后用一个新数组覆盖selectedStorage
,其中仅减少其id
匹配action.payload
的qty
属性的项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.