React:如何在结果为零时显示消息

时间:2017-07-20 21:12:16

标签: javascript reactjs ecmascript-6 es6-map

如果在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>
        );
    }
}

3 个答案:

答案 0 :(得分:4)

使用三元运算符:

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

答案 1 :(得分:3)

如果offersList数组为空,则其长度将等于0。你可以轻松搞定:

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

答案 2 :(得分:0)

curl ui.default.svc.cluster.local:80