ユーザーが照会した地名がないとコンポーネントを表示できません

Question

私はユーザーの場所を検索する検索フォームを持っています。ユーザーが入力した場所がapi（応答オブジェクト）内にある場合は、Roomコンポーネント以外のNoRoomコンポーネントを表示します。私がAPIにない場所を入力すると、私のNoRoomコンポーネントは表示されません。あなたが画像で見ることができる

search(query='place'){ 
    let url = "http://localhost:8000/api/v1/rental/?place__startswith="+encodeURIComponent(query); 
    Request.get(url).then((response) => { 
     console.log('response',response.body.objects); 
     this.setState({ 
      place:response.body.objects, 
     }); 
    }); 
    } 

    searchUpdated(term){ 
    this.search(term); 
    } 

    render() { 
     var margin = { marginTop : '13em' }; 
     if (this.state.place){ 
     let location = _.map(this.state.place, (place,id) => { 
      return(
        <Room key={id} 
        slug={place.slug} 
        place={place.place} 
        city={place.city} 
        gallery={place.gallery} 
        property={place.property}/> 
       ) 
      console.log('location',location); 
     }); 
     let gallery = _.map(this.state.place, (place,id) => { 
      console.log('place',place.gallery); 
      _.map(place.gallery, (image,id) => { 
       return(
         <img src={image.image} class="img-fluid" /> 
        ) 
      }); 
     }); 
     return(
      <div className = "container"> 
       <div className="content text-align-center"> 
        <div className="row text-xs-center"> 
         <div className="middle-text" style={margin}> 
          <h1 className="welcome"><span>Rental Space Welcome's you </span></h1> 
          <button ref="test" className="btn how-it-works" onClick={this.handleClick}>Search Space</button> 
         </div> 
        </div> 
       </div> 
       <div id="mySearch" className="overlay" onKeyDown={this.handleKeyDown}> 
        <button className="btn closebtn" onClick={this.handleClick}>x</button> 
        <div className="overlay-content"> 
         <SearchInput ref="searchInput" className="search-input" onChange={this.searchUpdated} /> 
         <div className="container searchList"> 
           { location } 
         </div> 
        </div> 
      </div> 
      </div> 
      ); 
    } 
    else{ 
     return(
      <NoRoom /> 
      ) 
    } 
    } 
} 

class Room extends React.Component{ 
    render(){ 
     let imageFile = this.props.gallery.map((image) => { 
      return(
        <img src={image.image} className="img-fluid" width="250px" height="250px" /> 
       ); 
     }); 
     return(
       <div className="room"> 
        <div className="thumbnail"> 
         { imageFile[0] } 
        </div> 
        <h3 className="listingName text-left"> 
        <a href = { "/rent/" + this.props.slug }>{this.props.place}</a> 
        </h3> 
        <span className="propertySpan"> 
         <i className = "fa fa-home"></i> 
         <span className="property">{this.props.property}</span> 
        </span> 
       </div> 
      ) 
    } 
} 

class NoRoom extends React.Component{ 
    render(){ 
     return(
      <div>No Room</div> 
      ) 
    } 
} 

KAT

呼ばない場所がない場合、余地のテキストは表示されませんされていない私が間違って何をしましたか？

Answer 1

ルートコンポーネントでは、ローカル状態（this.state.place）は、Roomコンポーネントを表示するかNoRoomコンポーネントを表示するかを定義する配列です。

APIで一致する場所が見つからない場合は、this.state.placeは空の配列で、truthyです。

if (this.state.place.length > 0) { 

詳細説明：

あなたのUIの動作は、コンポーネントの状態によって定義されているあなたは自分のrenderメソッドでは、配列の長さをチェックする必要が理由です。この状態の初期構造は、あなたの要素に記載されている必要があり、これは、コンポーネントのコンストラクタに何をすべきかです：

this.state = {place: []}; 

この初期状態は、コンポーネントの第一レンダリング時に使用されます。

次に、この状態を更新するたびに、this.setState（）をプロパティ "place"の新しい値で呼び出します。これは一貫性のための配列でなければなりません。

レンダリング（）メソッドでは、状態の現在の値に従ってUIを記述するだけで済みます。 "place"は常に配列であるため、データがあるかどうかを調べるために行うことができるのは、この配列の長さプロパティ（長さ=== 0、データがない場合）をテストすることだけです。 （配列が空であっても常に真実であるため）最初に（if（this.state.place）{...}）のように配列自体をチェックするだけでは、常に "true"と評価されます。それはあなたが望むものではありません。