如何根据对象 属性 和 url 中的路径动态呈现内容

Question

我有一个这样的对象数组：

const products = [
{
name: 'prod1',
category: 'cat1',
pageID: 'product-001',
},{
name: 'prod1',
category: 'cat1',
pageID: 'product-001',
},{
name: 'prod1',
category: 'cat1',
pageID: 'product-001',
}];

我正在将这些作为产品列表呈现在我的应用程序中。呈现的产品列表中的每个位置都应该 link 到特定的产品视图。到目前为止，我想出了 pageID 属性，它作为道具传递给 link。工作正常 - 路径正确。

我遇到的问题： 在尝试呈现特定产品视图时，我正在映射我的对象数组。如何检查我的 window.location.pathname 是否与对象之一的 pageID 相同，然后仅获取此对象的名称和类别？

Answer 1

只是 reduce 那个数组到一个对象中，键是 pageID，值是 name, category 的对象：

const products = [{
  name: 'prod1',
  category: 'cat1',
  pageID: 'product-001'
}, {
  name: 'prod2',
  category: 'cat2',
  pageID: 'product-002'
}, {
  name: 'prod2',
  category: 'cat2',
  pageID: 'product-002'
}];

const pageIDs = products.reduce((a, { name, category, pageID }) => ({ ...a, [pageID]: { name, category }}), {});

let windowPathname = "product-002";

console.log(pageIDs[windowPathname]);

_{（我编辑了您的示例数据以证明它有效）}