如何从反应js嵌套数组js文件中提取数据？

【问题标题】：how to extract data from react js nested array js file?如何从反应js嵌套数组js文件中提取数据？
【发布时间】：2020-11-22 19:08:20
【问题描述】：

我有一个名为 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 & 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 个项目

我创建了那个函数来提取道具

import React from 'react';

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

export default CollectionExtract;props

我觉得卡住了，不知道循环遍历元素的正确方法

【问题讨论】：

  • 您的问题不清楚。您是要从每种类型中删除 4 之后的所有元素，还是要在 4 项之后删除 name 和 imageUrl 属性？

标签： javascript reactjs


【解决方案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 & 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 return 语句中返回内容

      数据变量设置为：

          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 & 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 & 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】：

          对于你的问题，你几乎做对了。 如果每条路线都发送到产品类型组件，则项目将如下所示：

          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;

          可以看到集合Extract Component，我叫它Item来获取item作为prop。

          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 Example

          一点点，我用 react-router-dom 库做得很远。

          【讨论】：

            猜你喜欢
            • 2017-12-09
            • 1970-01-01
            • 2019-08-25
            • 2018-12-17
            • 1970-01-01
            • 2021-03-08
            • 2020-06-28
            • 1970-01-01
            • 2021-09-20
            相关资源
            最近更新 更多
            热门标签
            Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode