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

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

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

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

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

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

解决方法

只需将数组 reduce 放入一个对象中，键是 pageID，值是 name,category 的对象：

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

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

let windowPathname = "product-002";

console.log(pageIDs[windowPathname]);

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