javascript - React js中的条件渲染

我在渲染中添加了一个条件，突然它停止显示。这是我正在使用的代码。

 {this.state.sdata.map((sdata, i) =>
   {i < 5 &&
    <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
   }
  )
 }

我只想显示sdata中的4个项目。有人请帮忙。

最佳答案

您忘记了return正文中的map元素，以及i> = 5之后需要return null的所有array条目。

像这样写：

{this.state.sdata.map((sdata, i) => {
       if(i < 5)
          return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
       return null;
   })
}

但是我建议您使用for loop而不是map创建5个元素。

如果要使用map，请首先使用slice并创建5个元素的子array，然后在其上使用map。

像这样：

{this.state.sdata.slice(0,5).map((sdata, i) => {
     return <ServiceNavItem key={i} onClick={()=>this.handleSelect(i)}{...sdata} />
})}