Блог

Главная - Вопросы по программированию - Ошибка типа: Не удается уничтожить свойство «название «»коллекций», поскольку оно не определено

Ошибка типа: Не удается уничтожить свойство «название «»коллекций», поскольку оно не определено

#reactjs #react-redux #redux-selector

Вопрос:

Я пытаюсь получить коллекции с помощью селекторов. Вот мой код:

Селекторы

     import { createSelector } from "reselect";
    
        export const selectShop = state => state.shop;
        
        export const selectCollections = createSelector(
            [selectShop],
            shop => shop.collections
        )
    
    export const selectCollectionForPreview = createSelector(
        [selectCollections],
        collections => Object.keys(collections).map(key => collections[key])
    )
    
    export const selectCollectionItem = collectionUrl => 
        createSelector(
            [selectCollections],
            collections => collections[collectionUrl]
//It seems that the selector above is returning collections as an array instead of object, so collections[collectionUrl] is returning undefined
        )

Компонент

     const CollectionPage = ({collections}) => {
        // const {title, items} = Object.keys(collections)
        const {title, items} = collections
        console.log('collection', collections);
        
        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) => ({
        collections: selectCollectionItem(ownProps.match.params.collectionId)(state)
    })
    
    
    
    export default connect(mapStateToProps)(CollectionPage);

SHOP_DATA

     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
          },
          {
            id: 2,
            name: 'Blue Beanie',
            imageUrl: 'https://i.ibb.co/ypkgK0X/blue-beanie.png',
            price: 18
          },
          {
            id: 3,
            name: 'Brown Cowboy',
            imageUrl: 'https://i.ibb.co/QdJwgmp/brown-cowboy.png',
            price: 35
          },
          {
            id: 4,
            name: 'Grey Brim',
            imageUrl: 'https://i.ibb.co/RjBLWxB/grey-brim.png',
            price: 25
          },
          {
            id: 5,
            name: 'Green Beanie',
            imageUrl: 'https://i.ibb.co/YTjW3vF/green-beanie.png',
            price: 18
          },
          {
            id: 6,
            name: 'Palm Tree Cap',
            imageUrl: 'https://i.ibb.co/rKBDvJX/palm-tree-cap.png',
            price: 14
          },
          {
            id: 7,
            name: 'Red Beanie',
            imageUrl: 'https://i.ibb.co/bLB646Z/red-beanie.png',
            price: 18
          },
          {
            id: 8,
            name: 'Wolf Cap',
            imageUrl: 'https://i.ibb.co/1f2nWMM/wolf-cap.png',
            price: 14
          },
          {
            id: 9,
            name: 'Blue Snapback',
            imageUrl: 'https://i.ibb.co/X2VJP2W/blue-snapback.png',
            price: 16
          }
        ]
      },
      sneakers:{
        id: 2,
        title: 'Sneakers',
        routeName: 'sneakers',
        items: [
          {
            id: 10,
            name: 'Adidas NMD',
            imageUrl: 'https://i.ibb.co/0s3pdnc/adidas-nmd.png',
            price: 220
          },
          {
            id: 11,
            name: 'Adidas Yeezy',
            imageUrl: 'https://i.ibb.co/dJbG1cT/yeezy.png',
            price: 280
          },
          {
            id: 12,
            name: 'Black Converse',
            imageUrl: 'https://i.ibb.co/bPmVXyP/black-converse.png',
            price: 110
          },
          {
            id: 13,
            name: 'Nike White AirForce',
            imageUrl: 'https://i.ibb.co/1RcFPk0/white-nike-high-tops.png',
            price: 160
          },
          {
            id: 14,
            name: 'Nike Red High Tops',
            imageUrl: 'https://i.ibb.co/QcvzydB/nikes-red.png',
            price: 160
          },
          {
            id: 15,
            name: 'Nike Brown High Tops',
            imageUrl: 'https://i.ibb.co/fMTV342/nike-brown.png',
            price: 160
          },
          {
            id: 16,
            name: 'Air Jordan Limited',
            imageUrl: 'https://i.ibb.co/w4k6Ws9/nike-funky.png',
            price: 190
          },
          {
            id: 17,
            name: 'Timberlands',
            imageUrl: 'https://i.ibb.co/Mhh6wBg/timberlands.png',
            price: 200
          }
        ]
      },
      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
          },
          {
            id: 19,
            name: 'Blue Jean Jacket',
            imageUrl: 'https://i.ibb.co/mJS6vz0/blue-jean-jacket.png',
            price: 90
          },
          {
            id: 20,
            name: 'Grey Jean Jacket',
            imageUrl: 'https://i.ibb.co/N71k1ML/grey-jean-jacket.png',
            price: 90
          },
          {
            id: 21,
            name: 'Brown Shearling',
            imageUrl: 'https://i.ibb.co/s96FpdP/brown-shearling.png',
            price: 165
          },
          {
            id: 22,
            name: 'Tan Trench',
            imageUrl: 'https://i.ibb.co/M6hHc3F/brown-trench.png',
            price: 185
          }
        ]
      },
      womens:{
        id: 4,
        title: 'Womens',
        routeName: 'womens',
        items: [
          {
            id: 23,
            name: 'Blue Tanktop',
            imageUrl: 'https://i.ibb.co/7CQVJNm/blue-tank.png',
            price: 25
          },
          {
            id: 24,
            name: 'Floral Blouse',
            imageUrl: 'https://i.ibb.co/4W2DGKm/floral-blouse.png',
            price: 20
          },
          {
            id: 25,
            name: 'Floral Dress',
            imageUrl: 'https://i.ibb.co/KV18Ysr/floral-skirt.png',
            price: 80
          },
          {
            id: 26,
            name: 'Red Dots Dress',
            imageUrl: 'https://i.ibb.co/N3BN1bh/red-polka-dot-dress.png',
            price: 80
          },
          {
            id: 27,
            name: 'Striped Sweater',
            imageUrl: 'https://i.ibb.co/KmSkMbH/striped-sweater.png',
            price: 45
          },
          {
            id: 28,
            name: 'Yellow Track Suit',
            imageUrl: 'https://i.ibb.co/v1cvwNf/yellow-track-suit.png',
            price: 135
          },
          {
            id: 29,
            name: 'White Blouse',
            imageUrl: 'https://i.ibb.co/qBcrsJg/white-vest.png',
            price: 20
          }
        ]
      },
      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
          },
          {
            id: 31,
            name: 'Floral T-shirt',
            imageUrl: 'https://i.ibb.co/qMQ75QZ/floral-shirt.png',
            price: 20
          },
          {
            id: 32,
            name: 'Black amp; White Longsleeve',
            imageUrl: 'https://i.ibb.co/55z32tw/long-sleeve.png',
            price: 25
          },
          {
            id: 33,
            name: 'Pink T-shirt',
            imageUrl: 'https://i.ibb.co/RvwnBL8/pink-shirt.png',
            price: 25
          },
          {
            id: 34,
            name: 'Jean Long Sleeve',
            imageUrl: 'https://i.ibb.co/VpW4x5t/roll-up-jean-shirt.png',
            price: 40
          },
          {
            id: 35,
            name: 'Burgundy T-shirt',
            imageUrl: 'https://i.ibb.co/mh3VM1f/polka-dot-shirt.png',
            price: 25
          }
        ]
      }
    };

export default SHOP_DATA;

Пожалуйста, предоставьте какие-либо указания или советы о том, что я делаю не так? Я продолжаю получать сообщение об ошибке. Похоже, что коллекция не определена. Я не понимаю, почему. В идеале он должен возвращать объект.

Комментарии:

1. Похоже, что коллекции не определены, возможно, вы загружаете их асинхронно или они находятся где-то еще в штате. Вы можете проверить devtools, чтобы узнать, какие действия отправляются и какие изменения они внесли в состояние.

2. объем данных SHOP_DATA затрудняет чтение вашего вопроса, рассмотрите возможность использования достаточного количества данных для отображения формы, возможно, всего 1 или 2 записи для каждой категории, это значительно облегчит чтение вашего кода для людей

Ответ №1:

Вы экспортируете компонент следующим образом

 const mapStateToProps = (state,ownProps) => ({
     collections: selectCollectionItem(ownProps.match.params.collectionId)(state)
})

export default connect(mapStateToProps)(CollectionPage);

Идентификатор ownProps.match.params.collectionId может быть не определен.

Добавьте это в начало вашего файла

 import { withRouter} from 'react-router-dom'

и экспортируйте свой компонент, например

 export default connect(mapStateToProps)(withRouter(CollectionPage));

Комментарии:

1. Привет, ownProps.match.params возвращает значения, и селектор каким-то образом преобразует коллекции в массив.

Метки: ,