как извлечь данные из js-файла вложенного массива react js?

#javascript #reactjs

Вопрос:

у меня есть массив под названием shop data . он включает в себя данные для шляп, кроссовок, курток, мужских и женских. он должен включать название, цену и изображение только первых 4 элементов каждого вида. Я имею в виду первые 4 типа шляп, 4 типа курток и т. Д

 const SHOP_DATA = [
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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;

мне нужно создать страницу коллекции, которая включает в себя 4 элемента каждого типа, используя функцию map

я создал эту функцию для извлечения реквизита

 import React from 'react';

const CollectionExtract = (props) => {
    return (
        <div>
            {props.name}
            {props.imageUrl}
            {props.price}
        </div>
    );
};

export default CollectionExtract;props

я чувствую себя застрявшим и не знаю, как правильно перебирать элементы

Ответ №1:

Вы можете использовать map для перебора вашего массива «категорий», а затем использовать splice для получения первых четырех элементов в items массиве.

 function getFirstFourItems() {
  return SHOP_DATA.map((category) => {
    return {...category, items: category.items.slice(0,4)}
  })
}

Один из способов отображения его в компоненте может выглядеть примерно так:

 const Products = () => {
  return (
    <div>
      {SHOP_DATA.map((category) => {
         return (
           <div key={category.id}>
             <h1>{category.title}</h1>
               {category.items.slice(0,4).map(item => <CollectionExtract {...item}/>)}
           </div>
         )
        })}
    </div>
  )
}

Ответ №2:

Похоже, что с вашими текущими данными у вас есть массив из 5 элементов (шляпы, кроссовки, куртки, женские и мужские), в каждом из которых содержится массив элементов.

Если я правильно понимаю, вы хотите создать страницу из всех записей в первом массиве с 4 собственными элементами, правильно?

В этом случае ваш лучший друг — функция .map() .

Давайте сначала подумаем об основном массиве. Вы захотите просмотреть его и отобразить каждый из его элементов так, как считаете нужным. Это будет выглядеть примерно так, предположим, мы хотим отобразить только заголовок

 const App = () => {
    return (
      <div>
        {SHOP_DATA.map((category) => <p key={category.id}>{category.title}</p>)}
      </div>
    )
}

Теперь… Вы также хотите отобразить 4 элемента, которые есть в каждой категории, поэтому способ обойти это — иметь вторичный map элемент внутри первого, вызываемый по items свойству. Это будет выглядеть примерно так:

 const App = () => {
    return (
      <div>
        {SHOP_DATA.map((category) => (
          <div key={category.id}>
            <h3>{category.title}</h3>
            {category.items.map((item) => {
              return (
                <div>
                  {item.name}
                </div>  
              )
            })}
          </div>
        ))}
      </div>
    )
}

В последней части вы говорите, что хотите, чтобы отображались только 4 первых элемента. Для этого мы все еще можем в значительной степени сохранить то, что у нас уже есть, но использовать функцию .slice() для отображения только 4 элементов, а не всего массива:

 const App = () => {
    return (
      <div>
        {SHOP_DATA.map((category) => {
          const first4Items = category.items.slice(0, 4)
          return (
            <div key={category.id}>
              <h3>{category.title}</h3>
              {first4Items.map((item) => {
                return (
                  <div>
                    {item.name}
                  </div>  
                )
              })}
            </div>
          )
        })}
      </div>
    )
}

Очевидно, что здесь будет отображаться только имя элемента, поэтому я включу ваш компонент для использования на его месте и отобразит все свойства, которые вы хотите:

 const CollectionExtract = (props) => {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Image URL: {props.imageUrl}</p>
            <p>Price: {props.price}</p>
        </div>
    );
};



const App = () => {
    return (
      <div>
        {SHOP_DATA.map((category) => {
          const first4Items = category.items.slice(0, 4)
          return (
            <div key={category.id}>
              <h3>{category.title}</h3>
              {first4Items.map((item) => {
                return (
                  <CollectionExtract
                    name={item.name}
                    imageUrl={item.imageUrl}
                    price={item.price}
                  /> 
                )
              })}
            </div>
          )
        })}
      </div>
    )
}

При всем сказанном вот полностью функциональный пример приложения:

 const SHOP_DATA = [
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  }
];

const CollectionExtract = (props) => {
    return (
        <div>
            <p>Name: {props.name}</p>
            <p>Image URL: {props.imageUrl}</p>
            <p>Price: {props.price}</p>
        </div>
    );
};



const App = () => {
    return (
      <div>
        {SHOP_DATA.map((category) => {
          const first4Items = category.items.slice(0, 4)
          return (
            <div key={category.id}>
              <h3>{category.title}</h3>
              {first4Items.map((item) => {
                return (
                  <CollectionExtract
                    name={item.name}
                    imageUrl={item.imageUrl}
                    price={item.price}
                  /> 
                )
              })}
            </div>
          )
        })}
      </div>
    )
}



ReactDOM.render(
    <App />,
    document.getElementById('app')
);

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Ответ №3:

я рекомендую вам создать компонент и передать ему реквизиты, в моем решении я возвращаю простой HTML-код для демонстрационных целей.

 let content = '';
if(data.length) {
    content = data.map(item => {
      const {items, title, id} = item || {};
        return (
            <div key={id}>
                {title}
                <ul>
                    {items.slice(0,4).map(item =>{
                        const {imageUrl, price, name} = item || {}
                        return(
                            <>
                                <li>image : <img src={imageUrl} alt={name}/></li>
                                <li>price : <p>{price} </p></li>
                            </>
                        )
                    } )}
                </ul>
            </div>
       )
    })
}

После этого я дам вам четыре предмета из каждого массива предметов и с указанной выше категорией: шляпы, мужские, женские…

последний шаг — вернуть содержимое в операторе возврата jsx

Переменные данных должны быть установлены в :

     const [data, setDtata] = useState(
    [
        {
          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
            }
          ]
        },
        {
          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
            }
          ]
        },
        {
          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
            }
          ]
        },
        {
          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
            }
          ]
        },
        {
          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
            }
          ]
        }
      ]
      
)

Ответ №4:

 const SHOP_DATA = [
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  },
  {
    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
      }
    ]
  }
];


const CollectionExtract = ({ item }) => {
  return (
    <li>
      <p>{item.name} - ${item.price}</p>
      <img src={item.imageUrl} />
    </li>
  );
};

const Collection = ({ collection }) => {
  return (
    <div>
      <h3>{collection.title}</h3>
       <ul>
         {
           collection
             .items
             .slice(0, 4)
             .map((item) => {
               return (
                 <CollectionExtract 
                   item={item}
                 />
               );
             })
           }
       </ul>
     </div>
  );
};

const Collections = ({ collections }) => {
  return collections.map(collection => {
    return (
      <Collection
        collection={collection}
      />
    );
  });
};

const App = () => {
  return (
    <div>
      <h1>My Store</h1>
      <Collections collections={SHOP_DATA} />
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.querySelector('#root')
);

 <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Ответ №5:

Что касается вашего вопроса, вы почти все делаете правильно. если каждый маршрут отправляет компоненту типа products, элементы будут выглядеть так:

 import React from "react";
import Item from "./Item";

const Products = ({ title, items }) => {
  return (
    <div className="products-container">
      <h1>{title}</h1>
      {items.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
};

export default Products;

Вы можете увидеть компонент извлечения коллекции, я назвал его Item получить элемент в качестве реквизита.

 import React from "react";

const Item = ({ item: { imageUrl, name, price } }) => {
  return (
    <div>
      <h4>{name}</h4>
      <img src={imageUrl} />
      <div>${price}</div>
    </div>
  );
};

export default Item;

ответ на веб-сайте codesandbox также можно открыть и посмотреть

Пример реакции

я немного продвинулся с библиотекой react-router-dom.

Вопрос:

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

Ответ №1:

Ответ №2:

Ответ №3:

Ответ №4:

Ответ №5:

Вам также может понравиться

проблема с html в Excel!

UTF8 и jsp, пытаюсь понять, что происходит

Как использовать внешнюю переменную в пользовательской функции потерь для модели lstm в Keras?