如何检查对象数组中这些对象中的特定属性？反应

Posted 2023-03-10

【中文标题】如何检查对象数组中这些对象中的特定属性？反应

【英文标题】：How do I check an array of objects for a specific property within those objects? React

【发布时间】：2022-01-22 16:09:51

【问题描述】：

如果我有一个包含对象数组的数据，我如何检查每个对象是否包含特定的属性和值？然后创造使用包含或不包含指定属性的数据的可能性？

这是我正在使用的，但想将鞋子过滤到特定行 项目：

Row.js

import React from "react";
import "./Row.css";
import  shoes  from "./data";

function Row( title ) 
  return (
    <div className="row">
      <h2 className="row__title">title</h2>
      <div className="row__productsContainer">
        shoes.map((shoe) => 
          return (
            <div className="row__product">
              <img
                className="row__productImage"
                src=shoe.displayImagesLink
                
              />
              <h3 className="row__productName">
                shoe.brand shoe.productName shoe.gender
              </h3>
              <p>$shoe.price</p>
            </div>
          );
        )
      </div>
    </div>
  );


export default Row;

鞋子数据

export const shoes = [
  
    productName: "Air Force One",
    brand: "Jordan",
    price: "110.00",
    trending: true,
    gender: "womens",
    onSale: false,
    origPrice: "",
    newArrival: false,
    displayImagesLink: [
      "https://images.dsw.com/is/image/DSWShoes/498043_100_ss_01?impolicy=qlt-medium-high&imwidth=640&imdensity=2",
      "https://i.ebayimg.com/thumbs/images/g/fG8AAOSwsAtd16dg/s-l300.jpg",
      "https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/dc844cd51f00b98aff6e6488362ab325-1622582608.jpeg?crop=1.00xw:0.653xh;0,0.347xh&resize=640:*",
    ],
  ,
  
    productName: "Color Vintage Canvas Chuck 70",
    brand: "Converse",
    price: "85.00",
    trending: true,
    gender: "unisex",
    onSale: false,
    origPrice: "",
    newArrival: false,
    displayImagesLink: [
      "https://www.converse.com/dw/image/v2/BCZC_PRD/on/demandware.static/-/Sites-cnv-master-catalog/default/dw7116f8fa/images/d_107/171566C_D_107X1.jpg?sw=2000",
      "https://www.converse.com/dw/image/v2/BCZC_PRD/on/demandware.static/-/Sites-cnv-master-catalog/default/dw22858a53/images/f_107/171566C_F_107X1.jpg?sw=2000",
      "https://www.converse.com/dw/image/v2/BCZC_PRD/on/demandware.static/-/Sites-cnv-master-catalog/default/dwb698b526/images/j_107/171566C_J_107X1.jpg?sw=2000",
    ],
  ,
  
    productName: "Cap Toe Boot",
    brand: "Crown Vintage",
    gender: "Mens",
    trending: false,
    price: "59.99",
    onSale: true,
    origPrice: "79.00",
    newArrival: true,
    displayImagesLink: [
      "https://images.dsw.com/is/image/DSWShoes/500544_225_ss_01?impolicy=qlt-medium-high&imwidth=640&imdensity=2",
      "https://i.ebayimg.com/thumbs/images/g/fG8AAOSwsAtd16dg/s-l300.jpg",
      "https://i.pinimg.com/550x/b5/f4/93/b5f493eeb58458253e9a10ab258e8a9c.jpg",
    ],
  ,
  
    productName: "Classic Lined Clog",
    brand: "Crocs",
    price: "59.99",
    trending: true,
    gender: "Womens",
    onSale: false,
    origPrice: "",
    newArrival: true,
    displayImagesLink: [
      "https://images.dsw.com/is/image/DSWShoes/438702_547_ss_01?impolicy=qlt-medium-high&imwidth=640&imdensity=2",
      "https://images.dsw.com/is/image/DSWShoes/438702_433_ss_02?impolicy=qlt-medium-high&imwidth=640&imdensity=2",
      "https://images.dsw.com/is/image/DSWShoes/438702_433_ss_08?impolicy=qlt-medium-high&imwidth=640&imdensity=2",
    ],
  ,
];

感谢您的帮助。

【问题讨论】：

欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。请不要发布代码图片

【参考方案1】：

在地图之前，您可以添加类似这样的过滤器

shoes.filter(shoe => shoe["propertyName"] != undefined).map(...

访问一个不存在的属性会给你未定义的，所以你可以过滤没有该属性的对象，类似地，你可以做一个值检查

shoe["propertyName"] == <desired value>

对于具有多个选项的多个列表，您只需运行不同的过滤器，然后在它们上映射。