如何基于深度嵌套的数组更新状态?

时间:2019-10-17 01:54:33

标签: javascript arrays node.js reactjs

我很难根据库存更新一系列产品。这是数组:

  

const Data = [性别:[{男性:是,女性:假}],库存:               [                   {大小: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]);

     

const array = [];

     

用于(set3的常量猫){

array.push(cat)
     

}

我正在将客户端选择的一组数字推送到数组中,并且仅当产品包含以下大小(大小:4、5.5、6、6.5)时,我才想更新状态。

2)我只想退回包含上述条件的产品。

这是我到目前为止尝试过的:

  

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

     

const array = [];

     

对于(set3的常量猫){          array.push(cat)}

     

让mappingData = Data.map((product)=> {         返回product.stock.map((item)=> {            if(item.stock === 0){              返回item.size =未定义            }其他{              返回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有关。我将非常感谢您提供的任何帮助。谢谢!

3 个答案:

答案 0 :(得分: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);

答案 1 :(得分:0)

@CodeManiac 抱歉,让我重新发布此信息,以便您可以看到我所做的事情:

const mappingData = 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 } })

此刻,此操作仅返回当前大小,不包括集合中的数字。如何退回符合条件的实际产品?

答案 2 :(得分:0)

我决定将代码包含在沙箱中,以获取有关此问题的更多帮助。我还无法解决这个问题,但我相信我真的很亲近:

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

正如您在沙箱中看到的那样,我已经成功地根据阵列返回了库存中的尺寸,但是我没有返回整个对象。有人可以给我任何建议吗?