首页 > 解决方案 > 如何仅获取要在 react.js 中显示的特定变化数据

问题描述

我创建了购物车,产品名称、图片、价格和属性是在单独的组件中创建的。我遇到了一个问题,我只想获取特定产品变体的属性,但我得到了所有产品变体属性,如下图所示

在此处输入图像描述

上面显示了产品及其详细信息,但产品属性必须仅显示其特定的变体属性,但它会显示其所有变体属性。下面是产品的代码和MongoDB数据库结构。

在此处输入图像描述

在此处输入图像描述

我不知道我哪里错了,请帮助我。先感谢您。

标签: javascriptarraysreactjsmongodbreact-hooks

解决方案


如果要获取属性的子集,可以使用数组过滤方法。例如:

const res = {
  data: {
    VariationList: {
      Attribute: {
        Weight: 1,
        Length: 2,
        Width: 3,
        Hook: 4
      }
    }
  }
};

function getProductAttributes(data, filterList = []) {
  const entries = Object.entries(data.VariationList.Attribute);
  if (!filterList.length) return entries;
  return entries.filter((attr) => filterList.includes(attr[0]));
}

let output = getProductAttributes(res.data);
console.log(output); // [ [ 'Weight', 1 ], [ 'Length', 2 ], [ 'Width', 3 ], [ 'Hook', 4 ] ]

output = getProductAttributes(res.data, ['Weight', 'Length']);
console.log(output); // [ [ 'Weight', 1 ], [ 'Length', 2 ] ]

推荐阅读