React选择器JS问题：如何将数组的项目转换为对象？

问题描述

页面链接：https://nexus20201007.herokuapp.com/shop https://nexus20201007.herokuapp.com/shop/hats 因此，在这里，我要完成的工作是，如果此函数找到了对象，则可以将其映射并显示在特定的地址中。她是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',linkUrl: 'hats/4'
      },{
        id: 5,name: 'Green Beanie',imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',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',linkUrl: 'hats/7'
      },{
        id: 8,name: 'Wolf Cap',imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',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',linkUrl: 'sneakers/14'
      },{
        id: 15,name: 'Nike brown High Tops',imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',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',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',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',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',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',linkUrl: 'mens/31'
      },{
        id: 32,name: 'Black & White Longsleeve',imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',linkUrl: 'mens/32'
      },{
        id: 33,name: 'Pink T-shirt',imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',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',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);

谢谢。

路由组件更新：

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;

解决方法

首先，请以文本格式而不是图像格式粘贴代码。而且您还没有显示出要解决的问题。

请注意，JavaScript中的object充当字典，因此您应使用key对其进行访问，但您不会给出想要的键值对。

尚不清楚您何时要将嵌套的items数组转换为对象，所以我将为您提供使用id将其转换为对象的逻辑。作为键，将元素作为值。

给出由selectCollection选择器提供的特定帽子“帽子”

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",linkUrl: "hats/4"
    },{
      id: 5,name: "Green Beanie",imageUrl: "https://i.ibb.co/YTjW3vF/green-beanie.png",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",linkUrl: "hats/7"
    },{
      id: 8,name: "Wolf Cap",imageUrl: "https://i.ibb.co/1f2nWMM/wolf-cap.png",linkUrl: "hats/8"
    },{
      id: 9,name: "Blue Snapback",imageUrl: "https://i.ibb.co/X2VJP2W/blue-snapback.png",price: 16,linkUrl: "hats/9"
    }
  ]
}

我们将此对象称为collection。为了将items数组转换为对象，您可以将该数组简化为一个对象。

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

屈服对象

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

javascript react-redux reactjs reactjs reactjs reactjs reselect reselect reselect