Question

我正在学习React，并试图弄清楚如何根据类别过滤数组。

我正在使用的数据如下所示： http://www.mocky.io/v2/5c2bd5683000006900abaff9

因此，我可以使用以下方法过滤掉所有类别：

getTheCats() {
    const cats = [...new Set(this.getVehicleData().map(v => v.category))];
    const catsR = cats.filter(c => c).map((category, i) => {
        // console.log(this.props.vehicle);

        return (
            <Col
                xs="12"
                key={i}
                onClick={() => this.getCategories(category)}
                className={
                    this.state.category === category
                        ? 'border-bottom p-15 active'
                        : 'border-bottom p-15 not-active'
                }
            >
                <FontAwesomeIcon
                    icon={this.state.active ? faMinusCircle : faPlusCircle}
                />
                <h5 className=""> {category} </h5>
                <SpecsDetails
                    key={this.props.vehicle.id}
                    vehicle={this.props.vehicle}
                />
            </Col>
        );
    });
    return (
        <Row className="deal-details__specs accoridon-heading" id="specs">
            {catsR}
        </Row>
    );
}

这给了我所有的个人类别。但是我现在需要做的是将所有这些都放入手风琴中。因此，该类别实际上是手风琴的标题。如何获得与每个类别匹配的所有数据？

Answer 1

您可以使用groupBy获取类别的对象，每个类别都有一个值数组。然后，可以将toPairs和map与zipObject一起使用，将其转换为类别对象数组：

const { pipe, groupBy, prop, toPairs, map, zipObj, dissoc } = R;

const groupByCategories = pipe(
  groupBy(prop('category')),
  map(map(dissoc('category'))), // optional - if you want to remove the category from the values
  toPairs,
  map(zipObj(['category', 'values']))
)

const data = [{"label":"Remote trunk/hatch release","category":"Comfort & Convenience","value":"Remote control trunk/hatch release"},{"label":"Cruise control","category":"Comfort & Convenience","value":"Included"},{"label":"Cargo area light","category":"Comfort & Convenience","value":"Included"},{"label":"Computer","category":"Comfort & Convenience","value":"Trip computer: includes average fuel economy and range for remaining fuel"},{"label":"Headlight control","category":"Comfort & Convenience","value":"Headlight control with dusk sensor"},{"label":"Power locks","category":"Comfort & Convenience","value":"Card key power locks ; automatic locking"},{"label":"Ventilation system","category":"Comfort & Convenience","value":"Ventilation system with micro filter"},{"label":"Secondary ventilation controls","category":"Comfort & Convenience","value":"Passenger ventilation controls"},{"label":"Air conditioning","category":"Comfort & Convenience","value":"Dual-zone climate control"},{"label":"Power windows","category":"Comfort & Convenience","value":"Front windows with one-touch on two windows, rear windows"},{"label":"Spare wheel","category":"Comfort & Convenience","value":"Included"},{"label":"Compass","category":"Comfort & Convenience","value":"Included"},{"label":"Smart card / smart key","category":"Comfort & Convenience","value":"Keyless Enter ‘n Go™ smart card/smart key with keyless entry"},{"label":"Vehicle start button","category":"Comfort & Convenience","value":"Included"},{"label":"External","category":"Dimensions","value":"L: 189.8, W: 76.5 - H: 69.3"},{"label":"Cargo area dimensions","category":"Dimensions","value":"Cargo area dimensions: loading floor height (inches): 32.4"},{"label":"Weight","category":"Dimensions","value":"6,500 (lbs)"},{"label":"Engine","category":"Engine","value":"3.6 v6 V"},{"label":"Fuel system","category":"Engine","value":"Multi-point fuel injection"},{"label":"Fuel Type","category":"Engine","value":"unleaded"}]

const result = groupByCategories(data)

console.log(result)

<script src="https://cdnjs.cloudflare.com/ajax/libs/ramda/0.26.1/ramda.min.js"></script>

Answer 2

您实际上可以通过一些对象技巧来完成

let categories = {};
this.getVehicleData().map(vehicle => { 
  categories[vehicle.category] = categories[vehicle.category] || []
  categories[vehicle.category].push(vehicle)
})

您可以通过以下方式访问值

Object.keys(categories).map(category => {
  console.log('category', category)
  console.log('values', categories[category])
})

希望它能起作用：）

如何在react中根据类别过滤数组？

2 个答案: