Javascript 同一内容多次显示

我正在尝试使用reactjs和restapi开发过滤系统。有两个过滤选项，一个是房间编号，另一个是属性类型。我使用了onChange事件，每当用户选择（比如属性类型home）时，只会列出属性home类型的空间，如果用户再次选择房间数为4，则用户将获得属性类型home为4个房间的空间。问题是我多次获得相同的空间。只有两个空间listingEditNow和Tushant Khatiwada，但它们会显示两次以上

有什么问题吗

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

class FilterSpace1扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
空格：[]，
筛选器：false，
属性类型：“”，
房间：“”
}
this.handleFormInput=this.handleFormInput.bind（this）；
}
组件willmount（）{
这是.loadRoomFromServer（）；
}
loadRoomFromServer（）{
$.ajax({
url:“/api/rentals/”，
数据类型：'json'，
成功：（数据）=>{
this.setState（{space:data.results}）；
},
错误：（xhr、状态、错误）=>{
错误（url、状态、err.toString（））；
}
});
}
用于输入的手（属性类型、房间）{
这是我的国家({
propertyType:propertyType，
房间：房间，
筛选器：！this.state.filter
})
}
render（）{
let space=\.map（this.state.space，（space，id）=>{
返回(
);
});
返回(
{space}
)
}
}
类SpaceFilterMenu扩展了React.Component{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）；
}
handleChange（）{
log（'ref'，this.refs.propertyTypeInput.value）；
console.log（'ref'，this.refs.roomsInput.value）；
此.props.onFormInput(
this.refs.propertyTypeInput.value，
this.refs.roomsInput.value
);
}
render（）{
返回(
房间数
1.
2.
3.
4.
5.
6.
7.
8.
属性类型
公寓
房子
商店
邦格罗
);
}
}
类SpaceFilterResults扩展了React.Component{
构造函数（）{
超级（）；
}
render（）{
让结果=[]；
如果（this.props.filter==false）{
this.props.space.map（（space）=>{
结果：push（）
}); 
} 
否则{
this.props.space.map（（space）=>{
console.log（'space.property'，space.property）；
如果（space.rooms===this.props.rooms | | space.property===this.props.propertyType）{
结果：push（）
} 
});
}
返回(

{results}

)
}
}
类空间扩展了React.Component{
构造函数（）{
超级（）；
}
渲染（）{
返回(

{this.props.space.listingName}
{this.props.space.room}

{this.props.space.property}


)
}
}   
导出默认过滤器空间1；

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

---

this.props.space.map（（space）=>{if（this.props.rooms==0）{results.push（）}else if（space.rooms===this.props.rooms）{results.push（）}）；看看你的逻辑。这毫无意义。你的意思是，只需在不改变道具的情况下推动相同的组件，那么在这种逻辑中应该做什么呢？不确定你到底在做什么。。可能类似于

if（space.rooms===this.props.rooms）

意味着我们拥有的空间是每个选择的正确房间数。。因此，将其推到结果上我想要的是，当用户选择2时，应显示房间数为2的空间，如果用户从属性类型中选择“从房屋”选项，则应显示房间数为2的空间。过滤的目的是什么！此.state.filter在

handleforInput

中？每次在字段中键入内容时，都会切换

This.state.filter

。似乎不是您想要执行的操作。this.props.space.map（（space）=>{if（this.props.rooms===0）{results.push（）}否则if（space.rooms===this.props.rooms）{results.push（）}）；看看你的逻辑。这毫无意义。你的意思是，只需在不改变道具的情况下推动相同的组件，那么在这种逻辑中应该做什么呢？不确定你到底在做什么。。可能类似于

if（space.rooms===this.props.rooms）

意味着我们拥有的空间是每个选择的正确房间数。。因此，将其推到结果上我想要的是，当用户选择2时，应显示房间数为2的空间，如果用户从属性类型中选择“从房屋”选项，则应显示房间数为2的空间。过滤的目的是什么！此.state.filter在

handleforInput

中？每次在字段中键入内容时，都会切换

This.state.filter

。似乎不是你想做的事。

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;