Reactのデータに複数のフィルタを設定するにはどうすればよいですか？

Question

反応しているデータのリストに複数のフィルタがある場合に問題があります。現時点では、データの都市がフィルタ都市と一致する場合にのみ一覧項目を返す1つのフィルタが動作していますが、どのようにして同時に価格と都市をフィルタリングすることができますか？ここ

は、なぜあなただ​​けの場合は、マップ内の別の操作を行うことができない私のコンポーネント

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