如何基於深度嵌套數組更新 state？

Question

我很難根據庫存更新一系列產品。 這是數組：

常量數據= [性別：[{男：真，女：假}]，股票：[{尺寸：3，股票：100}，{尺寸：3.5，股票：10}，{尺寸：4，股票：0} ，{尺寸：4.5，庫存：330}，{尺寸：5，庫存：5}，{尺寸：5.5，庫存：555}，{尺寸：6，庫存：6}，{尺寸：6.5，庫存：63} ，{尺寸：7，庫存：0}，{尺寸：7.5，庫存：100}，{尺寸：8，庫存：33}，{尺寸：8.5，庫存：333}，{尺寸：9，庫存：222} ，{尺寸：9.5，庫存：99}，{尺寸：10，庫存：99}，{尺寸：10.5，庫存：77}，{尺寸：11，庫存：55}]}，{性別：[{男：假，女：真}]，股票：[{尺寸：3，股票：140}，{尺寸：3.5，股票：130}，{尺寸：4，股票：10}，{尺寸：4.5，股票：30} ，{尺寸：5，庫存：53}，{尺寸：5.5，庫存：55}，{尺寸：6，庫存：64}，{尺寸：6.5，庫存：643}，{尺寸：7，庫存：0} ，{尺寸：7.5，庫存：100}，{尺寸：8，庫存：334}，{尺寸：8.5，庫存：333}，{尺寸：9，庫存：22}，{尺寸：9.5，庫存：9} ，{尺寸：10，庫存：99}，{尺寸：10.5，庫存：7}，{尺寸：11，庫存：45}]，}]

我想根據以下條件更新數組：

1）如果客戶選擇的尺寸不包含在數組中，我只想返回包含所選尺寸的產品。 為此，我正在更新。

我有以下代碼來說明我的目標：

var set3 = new Set([ 4, 5.5, 6, 6.5 ]);

常量數組 = [];

for (set3 的 const cat) {

 array.push(cat)

}

我將客戶選擇的一組數字推送到一個數組，並且我想僅在產品包含這些尺寸（尺寸：4、5.5、6、6.5）時更新 state。

2) 我只想退回包含上述條件的產品。

這是我到目前為止所嘗試的：

var set3 = new Set([ 4, 5.5, 6, 6.5 ]);

常量數組 = [];

for (const cat of set3) { array.push(cat) }

let mappedData = Data.map((product) => { return product.stock.map((item) => { if(item.stock === 0) { return item.size = undefined } else { return item.size } }) })

 mappedData.forEach((item, idx, array) => {check = array.every (r => item.indexOf(r) >= 0) if( check ) { console.log(item) } else { return item } })

當我控制台記錄該項目時，它會返回包含我正在尋找的項目的項目，但是 A）它不會更新產品和 B）當我控制台記錄它時，它實際上並沒有返回我正在尋找的項目。 我確信這與我不了解 JavaScript 的事情有關。

Answer 1

您可以根據選定的大小直接過濾對象。 這個想法是，如果產品的所有選定尺寸的庫存均非零，則應包括該產品。 下面的演示包含來自您的沙箱的數據：

 const Data = [{"title":"Scotts","alternative_title":"Jeremy Scotts Pandabear","routeName":"Scotts","gender":[{"male":true,"female":true}],"brand":"Adidas","price":400,"stock":[{"size":3,"stock":100},{"size":3.5,"stock":10},{"size":4,"stock":0},{"size":4.5,"stock":330},{"size":5,"stock":5},{"size":5.5,"stock":555},{"size":6,"stock":6},{"size":6.5,"stock":63},{"size":7,"stock":0},{"size":7.5,"stock":100},{"size":8,"stock":33},{"size":8.5,"stock":333},{"size":9,"stock":222},{"size":9.5,"stock":99},{"size":10,"stock":99},{"size":10.5,"stock":77},{"size":11,"stock":55}],"description":"The Womens Air Jordan 1 Satin Black Toe” is a special construction of the original colorway of the Jordan 1 with satin paneling on the heel. Following the same blueprint of the Satin Shattered Backboard” colorway that was also a women's exclusive, this Satin Black Toe” edition features a black and white leather upper with red satin at the heel. The Air Jordan wings” logo on the ankle is presented in a metal medallion to complete the premium look. The Women's Air Jordan 1 Satin Black Toe” released on August 17, 2019 in limited quantities.","image":"https://drive.google.com/uc?id=1Uzaa15R2zn-YAozyyVi7RI5GAlhB0uCo"},{"title":"Boost 350 White","alternative_title":"Yeezy Boost 350 White","routeName":"yeezy","gender":[{"male":true,"female":false}],"brand":"Nike","price":200,"stock":[{"size":3,"stock":140},{"size":3.5,"stock":130},{"size":4,"stock":10},{"size":4.5,"stock":30},{"size":5,"stock":53},{"size":5.5,"stock":55},{"size":6,"stock":64},{"size":6.5,"stock":643},{"size":7,"stock":0},{"size":7.5,"stock":100},{"size":8,"stock":334},{"size":8.5,"stock":333},{"size":9,"stock":22},{"size":9.5,"stock":9},{"size":10,"stock":99},{"size":10.5,"stock":7},{"size":11,"stock":45}],"description":"The adidas Yeezy Boost 350 v2 Static released in December 2018, bringing a new look to Kanye Wests popular silhouette. The updated Yeezy 350 features a transparent mesh panel in place of the usual side stripe. The panel is woven into the Primeknit upper on each lateral side. The Yeezy 350 Static introduced an intricate new Primeknit pattern in white and grey hues. The clean appearance is solidified with a translucent white rubber midsole and outsole that wrap full-length Boost cushioning. The unique design of the adidas Yeezy Boost 350 v2 Static provided a refreshing update that will be in-demand for years to come.","image":"https://drive.google.com/uc?id=16Js6C1UyksZdVrPj_VdVKC16yYQcbMIp"},{"title":"Grey Yeezys","alternative_title":"Adidas Yeezy 500 Bone White","routeName":"yeezy-bone-whit","gender":[{"male":true,"female":false}],"brand":"Dolce & Gabbana","price":350,"stock":[{"size":3,"stock":140},{"size":3.5,"stock":10},{"size":4,"stock":1},{"size":4.5,"stock":340},{"size":5,"stock":53},{"size":5.5,"stock":55},{"size":6,"stock":654},{"size":6.5,"stock":43},{"size":7,"stock":90},{"size":7.5,"stock":70},{"size":8,"stock":34},{"size":8.5,"stock":33},{"size":9,"stock":2},{"size":9.5,"stock":94},{"size":10,"stock":9},{"size":10.5,"stock":0},{"size":11,"stock":0}]}] const set3 = new Set([11, 10.5]); const selectedSizes = [...set3]; const filteredProducts = Data.filter(product => selectedSizes.every(size => product.stock.some(s => s.stock > 0 && s.size === size))); console.log(filteredProducts);

Answer 2

@CodeManiac 對不起，讓我重新發布一下，這樣你就可以看到我做了什么：

const mappedData = Data.map((product) => {

> return product.stock.map((item) => {  
if(item.stock === 0) {  
return
> item.size = false } 
 else {  return item.size } }) }).find((item) => { 
> const check = array.every(r => item.indexOf((r)) >= 0);  const state =
> [];  if( check ) { return item } else { return null } })

同樣在這一刻，這僅返回不包括集合中數字的當前大小。 我將如何退回符合條件的實際產品？

Answer 3

我決定將代碼包含在沙箱中以獲得更多解決此問題的幫助。 我還沒有能夠解決這個問題，但我相信我真的很接近：

https://codesandbox.io/s/stoic-kalam-6x3xj

正如您在沙箱中看到的那樣，我成功地取回了基於數組的庫存尺寸，但是我沒有返回整個 object。 任何人都可以給我任何建議嗎？