Javascript 问题：如何转换数组'；将项目转换为对象？

页面链接： 所以在这里，我试图完成的是，如果这个函数找到了对象，我就能够映射它，并在一个特定的地址中显示它。 她的文件是shop.selector：

import { createSelector } from 'reselect';

const selectShop = state => state.shop;

export const selectCollections = createSelector(
  [selectShop],
  shop => shop.collections
);

export const selectCollectionsForPreview = createSelector(
  [selectCollections],
  collections => Object.keys(collections).map(key => collections[key])
);

export const selectCollection = collectionUrlParam =>
  createSelector(
    [selectCollections],
    collections => collections[collectionUrlParam]
  );

以下是数据文件：

    const SHOP_DATA = {
  hats: {
    id: 1,
    title: 'Hats',
    routeName: 'hats',
    items: [
      {
        id: 1,
        name: 'Brown Brim',
        imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
        price: 25,
        linkUrl: 'hats/1'
      },
      {
        id: 2,
        name: 'Blue Beanie',
        imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
        price: 18,
        linkUrl: 'hats/2'
      },
      {
        id: 3,
        name: 'Brown Cowboy',
        imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
        price: 35,
        linkUrl: 'hats/3'
      },
      {
        id: 4,
        name: 'Grey Brim',
        imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
        price: 25,
        linkUrl: 'hats/4'
      },
      {
        id: 5,
        name: 'Green Beanie',
        imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
        price: 18,
        linkUrl: 'hats/5'
      },
      {
        id: 6,
        name: 'Palm Tree Cap',
        imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
        price: 14,
        linkUrl: 'hats/6'
      },
      {
        id: 7,
        name: 'Red Beanie',
        imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
        price: 18,
        linkUrl: 'hats/7'
      },
      {
        id: 8,
        name: 'Wolf Cap',
        imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
        price: 14,
        linkUrl: 'hats/8'
      },
      {
        id: 9,
        name: 'Blue Snapback',
        imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
        price: 16,
        linkUrl: 'hats/9'
      }
    ]
  },
  sneakers: {
    id: 2,
    title: 'Sneakers',
    routeName: 'sneakers',
    items: [
      {
        id: 10,
        name: 'Adidas NMD',
        imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
        price: 220,
        linkUrl: 'sneakers/10'

      },
      {
        id: 11,
        name: 'Adidas Yeezy',
        imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
        price: 280,
        linkUrl: 'sneakers/11'
      },
      {
        id: 12,
        name: 'Black Converse',
        imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
        price: 110,
        linkUrl: 'sneakers/12'
      },
      {
        id: 13,
        name: 'Nike White AirForce',
        imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
        price: 160,
        linkUrl: 'sneakers/13'
      },
      {
        id: 14,
        name: 'Nike Red High Tops',
        imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
        price: 160,
        linkUrl: 'sneakers/14'
      },
      {
        id: 15,
        name: 'Nike Brown High Tops',
        imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
        price: 160,
        linkUrl: 'sneakers/15'
      },
      {
        id: 16,
        name: 'Air Jordan Limited',
        imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
        price: 190,
        linkUrl: 'sneakers/16'
      },
      {
        id: 17,
        name: 'Timberlands',
        imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
        price: 200,
        linkUrl: 'sneakers/17'
      }
    ]
  },
  jackets: {
    id: 3,
    title: 'Jackets',
    routeName: 'jackets',
    items: [
      {
        id: 18,
        name: 'Black Jean Shearling',
        imageUrl: 'https://i.ibb.co/XzcwL5s/black-shearling.png',
        price: 125,
        linkUrl: 'jackets/18'
      },
      {
        id: 19,
        name: 'Blue Jean Jacket',
        imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
        price: 90,
        linkUrl: 'jackets/19'
      },
      {
        id: 20,
        name: 'Grey Jean Jacket',
        imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
        price: 90,
        linkUrl: 'jackets/20'
      },
      {
        id: 21,
        name: 'Brown Shearling',
        imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
        price: 165,
        linkUrl: 'jackets/21'
      },
      {
        id: 22,
        name: 'Tan Trench',
        imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
        price: 185,
        linkUrl: 'jackets/22'
      }
    ]
  },
  womens: {
    id: 4,
    title: 'Womens',
    routeName: 'womens',
    items: [
      {
        id: 23,
        name: 'Blue Tanktop',
        imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
        price: 25,
        linkUrl: 'womens/23'
      },
      {
        id: 24,
        name: 'Floral Blouse',
        imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
        price: 20,
        linkUrl: 'womens/24'
      },
      {
        id: 25,
        name: 'Floral Dress',
        imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
        price: 80,
        linkUrl: 'womens/25'
      },
      {
        id: 26,
        name: 'Red Dots Dress',
        imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
        price: 80,
        linkUrl: 'womens/26'
      },
      {
        id: 27,
        name: 'Striped Sweater',
        imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
        price: 45,
        linkUrl: 'womens/27'
      },
      {
        id: 28,
        name: 'Yellow Track Suit',
        imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
        price: 135,
        linkUrl: 'womens/28'
      },
      {
        id: 29,
        name: 'White Blouse',
        imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
        price: 20,
        linkUrl: 'womens/29'
      }
    ]
  },
  mens: {
    id: 5,
    title: 'Mens',
    routeName: 'mens',
    items: [
      {
        id: 30,
        name: 'Camo Down Vest',
        imageUrl: 'https://i.ibb.co/xJS0T3Y/camo-vest.png',
        price: 325,
        linkUrl: 'mens/30'
      },
      {
        id: 31,
        name: 'Floral T-shirt',
        imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
        price: 20,
        linkUrl: 'mens/31'
      },
      {
        id: 32,
        name: 'Black & White Longsleeve',
        imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
        price: 25,
        linkUrl: 'mens/32'
      },
      {
        id: 33,
        name: 'Pink T-shirt',
        imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
        price: 25,
        linkUrl: 'mens/33'
      },
      {
        id: 34,
        name: 'Jean Long Sleeve',
        imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
        price: 40,
        linkUrl: 'mens/34'
      },
      {
        id: 35,
        name: 'Burgundy T-shirt',
        imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
        price: 25,
        linkUrl: 'mens/35'
      }
    ]
  }
};

export default SHOP_DATA;

目前，这些是对象：

我正试图用这些来代替它们：

我之所以使用这些对象而不是它们的类别，是因为我想创建单独的产品页面，而不是包含任何内容的大型类别页面。但是，我不熟悉如何处理数组中的项

以下是与构建车间数据相关的两个文件： 一个是单个项目模块：集合组件：

import React from 'react';
import { connect } from 'react-redux';

import CollectionItem from '../../components/collection-item/collection-item.component';

import { selectCollection } from '../../redux/shop/shop.selectors';

import './collection.styles.scss';

const CollectionPage = ({ collection }) => {
  const { title, items } = collection;
  return (
    <div className='collection-page'>
      <h2 className='title'>{title}</h2>
      <div className='items'>
        {items.map(item => (
          <CollectionItem key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.match.params.collectionId)(state)
});

export default connect(mapStateToProps)(CollectionPage);

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import CollectionPreview from '../collection-preview/collection-preview.component';

import { selectCollectionsForPreview } from '../../redux/shop/shop.selectors';

import './collections-overview.styles.scss';

const CollectionsOverview = ({ collections }) => (
  <div className='collections-overview'>
    {collections.map(({ id, ...otherCollectionProps }) => (
      <CollectionPreview key={id} {...otherCollectionProps} />
    ))}
  </div>
);

const mapStateToProps = createStructuredSelector({
  collections: selectCollectionsForPreview
});

export default connect(mapStateToProps)(CollectionsOverview);

从“React”导入React；
从'react redux'导入{connect}；
从“../../components/collection item/collection item.component”导入CollectionItem；
从“../../redux/shop/shop.selectors”导入{selectCollection}；
导入“./collection.styles.scss”；
const CollectionPage=（{collection}）=>{
const{title，items}=集合；
返回(
{title}
{items.map（item=>(
))}
);
};
const mapStateToProps=（state，ownProps）=>({
集合：选择集合（ownProps.match.params.collectionId）（状态）
});
导出默认连接（MapStateTops）（CollectionPage）；

另一个集合概述组件：

import React from 'react';
import { connect } from 'react-redux';

import CollectionItem from '../../components/collection-item/collection-item.component';

import { selectCollection } from '../../redux/shop/shop.selectors';

import './collection.styles.scss';

const CollectionPage = ({ collection }) => {
  const { title, items } = collection;
  return (
    <div className='collection-page'>
      <h2 className='title'>{title}</h2>
      <div className='items'>
        {items.map(item => (
          <CollectionItem key={item.id} item={item} />
        ))}
      </div>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => ({
  collection: selectCollection(ownProps.match.params.collectionId)(state)
});

export default connect(mapStateToProps)(CollectionPage);

import React from 'react';
import { connect } from 'react-redux';
import { createStructuredSelector } from 'reselect';

import CollectionPreview from '../collection-preview/collection-preview.component';

import { selectCollectionsForPreview } from '../../redux/shop/shop.selectors';

import './collections-overview.styles.scss';

const CollectionsOverview = ({ collections }) => (
  <div className='collections-overview'>
    {collections.map(({ id, ...otherCollectionProps }) => (
      <CollectionPreview key={id} {...otherCollectionProps} />
    ))}
  </div>
);

const mapStateToProps = createStructuredSelector({
  collections: selectCollectionsForPreview
});

export default connect(mapStateToProps)(CollectionsOverview);

从“React”导入React；
从'react redux'导入{connect}；
从“重新选择”导入{createStructuredSelector}；
从“../collection preview/collection preview.component”导入CollectionPreview；
从“../../redux/shop/shop.selectors”导入{selectCollectionsForPreview}；
导入“/collections overview.styles.scss”；
const CollectionsOverview=（{collections}）=>(
{collections.map（{id，…otherCollectionProps}）=>(
))}
);
const mapStateToProps=createStructuredSelector({
收藏：选择收藏进行预览
});
导出默认连接（MapStateTops）（集合概述）；

提前谢谢

路由组件更新：

import React from 'react';
import { Route } from 'react-router-dom';

import CollectionsOverview from '../../components/collections-overview/collections-overview.component';
import CollectionPage from '../collection/collection.component';

const ShopPage = ({ match }) => (
  <div className='shop-page'>
    <Route exact path={`${match.path}`} component={CollectionsOverview} />
    <Route path={`${match.path}/:collectionId`} component={CollectionPage} />
  </div>
);

export default ShopPage;

从“React”导入React；
从'react router dom'导入{Route}；
从“../../components/collections overview/collections overview.component”导入CollectionsOverview；
从“../collection/collection.component”导入CollectionPage；
const ShopPage=（{match}）=>(
);
导出默认商店页面；

首先，请以文本格式而不是图像格式粘贴代码。你还没有在你的问题中展示你将要做什么

---

请注意，JavaScript中的

对象

充当字典，因此您应该使用

键

访问它，但您没有给出所需的键值对。

仍然不清楚何时何地将嵌套的

项

数组转换为对象，因此，我只给您留下将其转换为对象的逻辑，该对象以

id

作为键，元素作为值

给定特定集合，“hats”，由

selectCollection

selector提供

const state = {shop: { collections: SHOP_DATA}};

const collection = selectCollection('hats')(state);

屈服

{
  id: 1,
  title: "Hats",
  routeName: "hats",
  items: [
    {
      id: 1,
      name: "Brown Brim",
      imageUrl: "https://i.ibb.co/ZYW3VTp/brown-brim.png",
      price: 25,
      linkUrl: "hats/1"
    },
    {
      id: 2,
      name: "Blue Beanie",
      imageUrl: "https://i.ibb.co/ypkgK0X/blue-beanie.png",
      price: 18,
      linkUrl: "hats/2"
    },
    {
      id: 3,
      name: "Brown Cowboy",
      imageUrl: "https://i.ibb.co/QdJwgmp/brown-cowboy.png",
      price: 35,
      linkUrl: "hats/3"
    },
    {
      id: 4,
      name: "Grey Brim",
      imageUrl: "https://i.ibb.co/RjBLWxB/grey-brim.png",
      price: 25,
      linkUrl: "hats/4"
    },
    {
      id: 5,
      name: "Green Beanie",
      imageUrl: "https://i.ibb.co/YTjW3vF/green-beanie.png",
      price: 18,
      linkUrl: "hats/5"
    },
    {
      id: 6,
      name: "Palm Tree Cap",
      imageUrl: "https://i.ibb.co/rKBDvJX/palm-tree-cap.png",
      price: 14,
      linkUrl: "hats/6"
    },
    {
      id: 7,
      name: "Red Beanie",
      imageUrl: "https://i.ibb.co/bLB646Z/red-beanie.png",
      price: 18,
      linkUrl: "hats/7"
    },
    {
      id: 8,
      name: "Wolf Cap",
      imageUrl: "https://i.ibb.co/1f2nWMM/wolf-cap.png",
      price: 14,
      linkUrl: "hats/8"
    },
    {
      id: 9,
      name: "Blue Snapback",
      imageUrl: "https://i.ibb.co/X2VJP2W/blue-snapback.png",
      price: 16,
      linkUrl: "hats/9"
    }
  ]
}

让我们调用这个对象

集合

。要将

项

数组转换为对象，可以将该数组缩减为对象

collections.items.reduce(
  (items, item) => ({
    ...items,
    [item.id]: item
  }),
  {}
);

屈服物体

{
  '1': {
    id: 1,
    name: 'Brown Brim',
    imageUrl: 'https://i.ibb.co/ZYW3VTp/brown-brim.png',
    price: 25,
    linkUrl: 'hats/1',
  },
  '2': {
    id: 2,
    name: 'Blue Beanie',
    imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
    price: 18,
    linkUrl: 'hats/2',
  },
  '3': {
    id: 3,
    name: 'Brown Cowboy',
    imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
    price: 35,
    linkUrl: 'hats/3',
  },
  '4': {
    id: 4,
    name: 'Grey Brim',
    imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
    price: 25,
    linkUrl: 'hats/4',
  },
  '5': {
    id: 5,
    name: 'Green Beanie',
    imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
    price: 18,
    linkUrl: 'hats/5',
  },
  '6': {
    id: 6,
    name: 'Palm Tree Cap',
    imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
    price: 14,
    linkUrl: 'hats/6',
  },
  '7': {
    id: 7,
    name: 'Red Beanie',
    imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
    price: 18,
    linkUrl: 'hats/7',
  },
  '8': {
    id: 8,
    name: 'Wolf Cap',
    imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
    price: 14,
    linkUrl: 'hats/8',
  },
  '9': {
    id: 9,
    name: 'Blue Snapback',
    imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
    price: 16,
    linkUrl: 'hats/9',
  },
}

---

请将所有代码包含为格式正确的纯文本代码段，图像不可搜索。您可以使用array:：reduce将数组简化为一个对象。我已经添加了所有相关文件。目前，选择器正在使用collection->shop's items，即帽子、运动鞋、夹克、女士、男士作为url参数，它将生成类似shop/hats、shop/sneakers等的页面。但是，我想要的是单个产品页面，而不是类别页面。因此，我认为问题来自选择器文件。我应该通过正确的物体。。。我希望hats id作为参数，这样它将生成像shop/hats/1这样的页面，并且如果有意义的话，每页只显示一张图片。。。。谢谢你的帮助。抱歉搞混了，不用担心。从您的描述来看，这听起来更像是路由器/路由问题，而不是redux选择器问题。您是否在特定路由上有页面容器，以便将匹配参数传递给选择器并获取所需的状态？是的，我有一个组件来执行此任务。我已经更新了这个问题。你是对的，但这不是一个答案，而是一个评论，我会更改它以避免投反对票。