如何基于一个深层嵌套的数组更新状态？

Question

如何基于一个深层嵌套的数组更新状态？

3

我在更新基于库存的产品数组时遇到了困难，以下是要更新的数组：

const Data = [ gender: [{ male: true, female: false }], 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 } ] }, { gender: [{male: false, female: true }], 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 } ], } ]

我想基于以下标准更新数组：

1）如果客户选择的尺码不在数组中，我只想返回包含所选尺码的产品。对此，我正在进行更新。

我有以下代码来说明我想达到的目标：

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

const array = [];

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

我正在将客户选择的一组数字推送到数组中，如果产品包含这些尺寸（尺码：4、5.5、6、6.5），则我希望只更新状态。

2）我只想返回符合上述条件的产品。

到目前为止，这是我所尝试的：

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

const array = [];

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 中我不知道的一些东西有关。

- alexander95371

首先，你的setState在哪里？forEach循环不会在循环外返回任何内容。 - Code Maniac

嘿，感谢您的回复！我还没有设置状态，因为我想先能够将我的结果导出，然后只需将其存储在变量中，以便我可以在组件将挂载时更新它。您认为直接过滤数据会更好吗？我该如何做到这一点？ - alexander95371

@CodeManiac 或许我还不太明白如何使用forEach。我是否需要像for循环一样将结果推入新数组中？ - alexander95371

你可以使用find方法。 - Code Maniac

@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 = arr.every(r => item.indexOf((r)) >= 0); const state = []; if( check ) { return item } else { return null } }) - alexander95371

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slider · Accepted Answer

您可以直接根据所选大小过滤对象。其思想是，如果产品在所有选择的尺寸上都有非零库存，则应包括该产品。以下演示包含来自您的沙盒的数据：

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