映射函数中的反应条件语句

Question

我正在显示来自Google Maps API的评论。在我的地图功能中，我只想显示高于1评分的评论。如何更新我的地图功能以仅显示review.rating > 1的评论？

{this.state.reviews && this.state.reviews.map((review, index) => (
<div key={index} className="review">
<p>{review.text}</p>
</div>
))}

Answer 1

只需在映射之前过滤它们：

{this.state.reviews
.filter((review) => review.rating > 1) // get only reviews with rating > 1
.map((review, index) => (
<div key={index} className="review">
<p>{review.text}</p>
</div>
))
}

Answer 2

如果出于某种原因您不想在数组上调用.filter方法，您可以执行以下操作。基本上，您在返回时正在调用三元运算符。如果您需要更多解释，请告诉我。

{this.state.reviews && this.state.reviews.map((review, index) => (
review.index > 1
? (<div key={index} className="review">
<p>{review.text}</p>
</div>)
: null
))}