如何在 React 中对我的数据设置多个过滤器？

Question

我的反应数据列表中有多个过滤器时遇到问题。目前我有一个过滤器工作，如果数据的城市与过滤器城市匹配，它只返回列表项，但是我怎样才能同时过滤价格、城市和一起搜索？

这是我的组件

            import React, { Component } from 'react'
            import ListingStreamItem from './ListingStreamItem'
            import zipcodes from 'zipcodes'
            class Home extends Component {
                constructor(props) {
                    super(props)
                    this.handleChange = this.handleChange.bind(this)
                    this.state = {
                        visitor_city: '',

                    }
                }
                componentDidMount() { 
                    const _this = this;
                    $.get("https://ipinfo.io", function(response) {
                        console.log(response.city, response.country);
                        _this.setState({
                            visitor_city: response.city
                        })
                    }, "jsonp");

                }
                handleChange(e) {
                    this.setState({
                        [e.target.name] : e.target.value
                    })
                }
                render(){

                    const user = this.props.user !== null ? true : false
                    const listings = this.props.listings == null ? 'There are no listings available at this time' : Object.keys(this.props.listings).reverse().map((key) => {
                        var areEqual = this.state.visitor_city.toUpperCase() === this.props.listings[key].city.toUpperCase();

                        if (areEqual) {
                            return (
                                <li key={key}>
                                    <ListingStreamItem 
                                        id={key}
                                        title={this.props.listings[key].title}
                                        desc={this.props.listings[key].description}
                                        price={this.props.listings[key].price}
                                        zipcode={this.props.listings[key].zipcode}
                                        images={this.props.listings[key].listingimages}
                                    />
                                </li>
                            )
                        }
                    }) 
                    return(
                        <div>

                        <select name="visitor_city" onChange={this.handleChange}>
                            <option value="orlando">Orlando </option>
                            <option value="new york city">New York City</option>
                        </select>
                        <p>Or Zip Code </p>
                        <input type='number' min="0" name='miles_from_zip' placeholder="miles" value={this.state.miles_from_zip} />
                        <input type='text' name="zipcode" placeholder="from zip" value={this.state.zipcode} />
                        <button>Filter </button>
                        <ul>
                            {listings}
                        </ul>

                        </div>
                    )
                }
            }

            export default Home

Answer 1

如果在您的地图内，您为什么不能再做一次（这是假设您的价格过滤器也处于状态的简单解决方案）：

const listings = this.props.listings == null ? 'There are no listings available at this time' : Object.keys(this.props.listings).reverse().map(key => {
    let {visitor_city, price} = this.state;
    let listing = this.props.listings[key];

    if (visitor_city.toUpperCase() === listing.city.toUpperCase()
        && (!price || price === listing.price)
    ) {
        return (
        ...
        )
    }
}) 

---

更简洁的选择可能是查看Array.prototype.filter 函数：

filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"];

var longWords = words.filter(word => word.length > 6);

// Filtered array longWords is ["exuberant", "destruction", "present"]

---

所以在你的场景中，也许你可以这样做：

Object.keys(this.props.listings).reverse().filter(key => {
    let {visitor_city, price} = this.state;
    let listing = this.props.listings[key];

    return visitor_city.toUpperCase() === listing.city.toUpperCase()
        && (!price || price === listing.price)    
}).map(key => {
    ...
})