Question

我有一个组件，其中包含要映射的一系列产品。在另一个组件中，我有一个复选框列表，用户可以在其中选择任意数量的作为prodict属性的复选框。我正在尝试为地图创建一个过滤器，以便显示具有任何选中属性的任何产品。

复选框属性的示例为：

  const attributes = [
    {
      firm: true,
      medium: true,
    },
  ];

因此，在所有产品中，将显示具有公司或媒介属性的任何产品。

我尝试执行以下操作：

{data.products
  .filter((item) => item.categories.some(({ value }) => value === 'medium'))
  .map((item, id) => {
    return <ProductCard key={id} item={item} data={data} />;
  })
}

但是，显然，它只接受我硬编码中输入的任何值。我不确定如何尝试执行此操作，以便过滤器将遍历attributes数组中的所有属性。

Answer 1

没有一些示例数据，我不确定这是否满足您的要求，并且我对DateTime的结构仍然有些模糊。（您说数组中可能有多个元素，但是其他元素不会影响我们。我们是否总是采用第一个？最后一个？还有其他吗？）

但是这个可能可以做到：

DateTime::CreateFromFormat()

attributes接受一个对象，该对象的格式类似于示例const matchingAtts = (attributes, products) => { const atts = Object .keys (attributes) return products .filter ( ({catetories}) => categories .some (({ value }) => atts .includes (value)) ) } // ... {matchingAtts (attributes [0] /* ?? */, data .products) .map((item, id) => { return <ProductCard key={id} item={item} data={data} />; }) }数组的第一个条目和产品列表，并返回一个包含某些类别的数组，这些类别中的matchingAtts位于键中属性。

Answer 2

尚不清楚要过滤哪些属性，但是，如果您有一组已检查的属性，并且要按它们进行过滤，则可以使用Object.values方法对其进行过滤：

const shorterVersion = data.filter(f =>
  filterAttributes.some(s =>
      Object.keys(s).every(s => Object.values(f).some(v => v == s)))
)

一个例子：

const filterAttributes = [
  {
    firm: true,
    medium: true,
  },
];

var data = [
  { name: "Joe", sign: '1', value: "small" },
  { name: "Mike", sign: 'firm', value: "medium" },
  { name: "Joe", sign: '2', value: "big" }
];

const result = data.filter(f => {
  return filterAttributes.some(s => {
    let attributeKeys = Object.keys(s);
    let dataValues = Object.values(f);
    let result = attributeKeys.every(s => dataValues.some(v => v == s));
    return result;
  })
})

const shorterVersion = data.filter(f =>
  filterAttributes.some(s =>
      Object.keys(s).every(s => Object.values(f).some(v => v == s)))
)


console.log(`result: `, result);
console.log(`shorterVersion: `, shorterVersion);

这是更可调试的版本：

const result = data.filter(f => {
  return filterAttributes.some(s => {
    let attributeKeys = Object.keys(s);
    let dataValues = Object.values(f);
    let result = attributeKeys.every(s => dataValues.some(v => v == s));
    return result;
  })
})

通过另一个数组中的项目过滤JavaScript数组映射？

2 个答案: