React map() 仅渲染具有特定键值的项目答案

【问题标题】：React map() render items only with spesific key valueReact map() 仅渲染具有特定键值的项目
【发布时间】：2021-09-02 06:54:18
【问题描述】：

如何通过数组进行映射，只渲染 'TopPicks' 值为 '1' 的项目？

const Products = [
{
    _id: 1,
    name: 'iphone',
    description: '....',
    image: '/assets/images/iphone.jpg',
    link: 'link',
    SubCategory: 'mobile',
    TopPicks: '1',
},
{
    _id: 2,
    name: 'samsung',
    description: ',,,,',
    image: '/assets/images/smasung.jpg',
    link: 'link',
    SubCategory: 'mobile',
    TopPicks: '2',
}

]

            <div className="product-list">
                {Products.map((product) => (
                    <Product product={product} />
                ))}
            </div>

【问题讨论】：

使用filter 而不是map
这能回答你的问题吗？ Filter React Native Data

标签： reactjs

【解决方案1】：

您想要的与react 无关，而是与js 代码相关，您只需使用js 中的可链接filter 函数过滤数组

      <div className="product-list">
          {
            Products
              .filter(product => product.TopPicks == '1')
              .map((product) => (
                <Product product={product} />
              ))
          }
        </div>

【讨论】：

【解决方案2】：

与reactjs相关的问题那么我的假设是使用react三元渲染

<div className="product-list">
    {Products.map((product) => (product.TopPicks === "1" ? <Product product={product} /> : null))}
</div>

附：如果您有复杂的条件，最好的方法是在渲染之前过滤数组

【讨论】：