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

【问题标题】：How to dynamically render content based on object property and path in url如何根据 url 中的对象属性和路径动态呈现内容
【发布时间】：2021-05-16 00:08:52
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript arrays reactjs mapping javascript-objects

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

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

【讨论】：