Wie kann ich mehrere Filter auf meine Daten in React haben?

Question

Ich habe Probleme mit mehreren Filtern auf meiner Liste von Daten in reagieren. Momentan habe ich einen Filter, der nur den Listeneintrag zurückgibt, wenn die Stadt der Daten mit der Filterstadt übereinstimmt, aber wie kann ich gleichzeitig den Preis und die Stadt filtern und auch alle zusammen suchen?

hier meine Komponente Sie

  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

Warum können nicht nur ein weiteres tun, wenn in Ihrer Karte ist (dies ist die einfache Lösung, um Ihre Preisfilter unter der Annahme, in Zustand wird auch):

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 (
     ... 
     ) 
    } 
}) 

---

:

Eine sauberere Option könnte am Array.prototype.filter Funktion suchen sein

Die Methode filter() erstellt ein neues Array mit allen Elementen, die den von der bereitgestellten Funktion implementierten Test bestehen.

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

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

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

---

in Ihrem Szenario So könnten Sie vielleicht so etwas wie tun:

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 => { 
    ... 
})