多次显示相同的内容

Question

我正在尝试使用reactjs和rest api开发过滤系统。有两个过滤选项，一个是房间，另一个是房产类型。每当用户选择说属性类型为home时，我都会使用onChange事件，然后只列出属性为home的空格，如果用户再次选择房间数为4，则用户将获得属性类型为4个房间的空间。问题是我多次获得相同的空间。列出EddNow和Tushant Khatiwada只有两个空格，但它们显示的次数是2次。

可能是什么问题？

这是我的代码与json文件（/ api / rental /）

class FilterSpace1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      space:[],
      filter:false,
      propertyType: '',
      rooms: ''
    }
    this.handleFormInput = this.handleFormInput.bind(this);
  }

  componentWillMount(){
        this.loadRoomFromServer();
    }

    loadRoomFromServer(){
        $.ajax({
            url:'/api/rentals/',
            dataType:'json',
            success: (data) => {
                this.setState({space: data.results});
              },
              error: (xhr, status, err) => {
                console.error(url, status, err.toString());
              }
            });
    }

  handleFormInput(propertyType, rooms) {
    this.setState({
      propertyType: propertyType,
      rooms: rooms,
      filter: !this.state.filter
    })
  }

  render() {
   let space = _.map(this.state.space, (space,id) => {
    return(
            <SpaceFilterResults
            key = {space.id}
            space={this.state.space}
            filter={this.state.filter}
            propertyType={this.state.propertyType}
            rooms={this.state.rooms}
          />
      );

   });
    return (
      <div className="filter">
        <SpaceFilterMenu
          propertyType={this.state.propertyType}
          rooms={this.state.rooms}
          onFormInput={this.handleFormInput}
        />
        {space}
      </div>
    )
  }
}

 class SpaceFilterMenu extends React.Component {
   constructor() {
     super();
     this.handleChange = this.handleChange.bind(this);
   }

   handleChange() {
    console.log('ref',this.refs.propertyTypeInput.value);
    console.log('ref',this.refs.roomsInput.value);
     this.props.onFormInput (
       this.refs.propertyTypeInput.value,
       this.refs.roomsInput.value
     );
   }

   render() {
     return (
      <div className="container filterMenu">
        <div className="row">
           <form className="filter-menu">
             <label htmlFor="roomsInput">Number of rooms</label>
              <select id="roomsInput" ref="roomsInput" onChange={this.handleChange}>
                 <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="4">4</option>
                 <option value="5">5</option>
                 <option value="6">6</option>
                 <option value="7">7</option>
                 <option value="8">8</option>
              </select>

             <label htmlFor="propertyTypeInput">propertyType</label>
             <select id="propertyTypeInput" ref="propertyTypeInput" onChange={this.handleChange}>
               <option value="appartment">Appartment</option>
               <option value="house">House</option>
               <option value="shop">Shop</option>
               <option value="bunglow">Bunglow</option>
             </select>
           </form>
          </div>
      </div>
     );
   }
 }

class SpaceFilterResults extends React.Component {
  constructor() {
    super();
  }

  render() {
    let results = [];
   if(this.props.filter === false){ 
      this.props.space.map((space) => { 
        results.push(<Space space={space} />) 
      }); 
      } 
      else { 
       this.props.space.map((space) => { 
        console.log('space.property',space.property);
        if (space.rooms === this.props.rooms || space.property === this.props.propertyType){ 
          results.push(<Space space={space} />) 
      } 

  });
}

    return (

             <div className="filter-results">
                <ul className="blocks blocks_3up">
                  {results}
                </ul>
              </div>
    )
  }
}

class Space extends React.Component {
  constructor () {
    super();
  }

  render () {
    return (
      <li className="col-md-4 filterResults">
              <div className="feature-hd">
                <h2 className="hdg hdg_2">{this.props.space.listingName}</h2>
              </div>
              <div className="feature-bd">
                <p>{this.props.space.room}</p>
              </div>
              <div className="feature-ft">
                <p>{this.props.space.property}</p>
              </div>
      </li>
    )
  }
}   

export default FilterSpace1;

只有2个空格（listingListEditedNow和Tushant Khatiwada），但这两个空格显示两次。