【问题标题】:How can I update the state based on a deeply nested array?如何根据深度嵌套的数组更新状态?
【发布时间】:2020-02-13 20:32:16
【问题描述】:

我在根据库存更新一系列产品时遇到了困难。这是数组:

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

常量数组 = [];

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

常量数组 = [];

for (const cat of set3) { 数组.push(cat) }

让 mappedData = Data.map((product) => { 返回 product.stock.map((item) => { 如果(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 的事情有关。

【问题讨论】:

  • 首先你的 setstate 在哪里? forEach 不会在循环之外返回任何内容
  • 您好,感谢您的回复!我没有设置状态,因为我希望首先能够通过管道传输我的结果,然后将其存储在一个可以在 Component Will Mount 中更新的变量中。您认为仅过滤数据会更好吗?我该怎么办?
  • @CodeManiac 也许我不明白如何使用 forEach。我是否需要像在 for 循环中那样将结果推送到一个新数组中?
  • 你可以使用 find 方法来代替
  • @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 { 返回 null } })

标签: javascript arrays node.js reactjs


【解决方案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);

【讨论】:

  • 非常感谢,非常感谢您的帮助。我知道我从一开始就没有这样做。你是男人!最后一个问题。我在哪里可以学习如何操作这样的数组?我到处都得到随机信息,但我还没有找到关于数组的高级课程。再次非常感谢!
  • @alexander95371 乐于提供帮助 :) 这需要练习。我建议您在 Leetcode (leetcode.com/tag/array) 等网站上解决一些问题,并在您需要特定帮助时参考 Mozilla JS 文档 (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)。另外,如果它解决了您的问题,请将答案标记为已接受。
  • 非常感谢!我从你的回答中学到的东西比我整整一周学到的东西还多。我会继续标记它。我不知道我可以,我对这一切都很陌生。再次感谢你是男人!
猜你喜欢
  • 2021-03-15
  • 1970-01-01
  • 1970-01-01
  • 2021-11-01
  • 2019-04-03
  • 2020-05-20
  • 1970-01-01
  • 2017-04-30
  • 1970-01-01
相关资源
最近更新 更多