反應：如何在結果爲零時顯示消息反應

Question

如何顯示沒有結果當搜索結果爲空時消息在map()？

export class Properties extends React.Component { 
    render() { 
     const { data, searchText } = this.props; 
     const offersList = data 
      .filter(offerDetail => { 
       return offerDetail.city.toLowerCase().indexOf(searchText.toLowerCase()) >= 0; 
      }) 
      .map(offerDetail => { 
       return (
        <div className="offer" key={offerDetail.id}> 
         <h2 className="offer-title">{offerDetail.title}</h2> 
         <p className="offer-location"><i className="location-icon"></i> {offerDetail.city}</p> 
        </div> 
       ); 
      }); 
     return (
      <main> 
       <div className="container"> 
        <h1>Main {offersList.length}</h1> 
        { offersList } 
       </div> 
      </main> 
     ); 
    } 
} 

Answer 1

隨着三元操作符：

<main> 
    <div className="container"> 
    <h1>Main {offersList.length}</h1> 
    { offersList.length ? offersList : <p>No result</p> } 
    </div> 
</main> 

Answer 2

offersList如果數組爲空，它的長度將等於0。您可以輕鬆創建條件：

<div className="container"> 
    <h1>Main {offersList.length}</h1> 
    { offersList.length ? offersList : <p>No Result</p> } 
</div>