时间戳

首页 > 解决方案 > 使用 reverse() 反应地图限制

javascript - 使用 reverse() 反应地图限制

问题描述

我有以下组件显示我的数据库中的列表。该列表按我的意愿正确显示，因此最新元素位于顶部而不是底部。

如何限制我的列表仅显示 7 个最新的元素？

slice(0,7)从底部显示元素，因此它不起作用reverse()

render() {
  return (
    <div>
      <TransitionGroup>
      
        {this.state.patients.slice(0).reverse().map(patient => 
        
          <CSSTransition 
            key={patient.id}
            timeout={500}
            classNames="item">
            
            <ListGroup.Item>                 
              {patient.nom}  {patient.prenom}  
            </ListGroup.Item>  
          </CSSTransition>
        )} 
      </TransitionGroup>
    </div>
  )
}

标签： javascriptreactjs

解决方案

除了将正索引传递给切片，您还可以传递负索引，切片将从数组的末尾开始。

let abc = [1,2,3,4,5,6,7,8,9,10]

let fromStart = abc.slice(0,7)

let fromEnd = abc.slice(-7)

console.log('Start Element', fromStart)
console.log('End Elements', fromEnd)

您可以在此表单中更改切片。

this.state.patients.slice(-7).reverse().map

推荐阅读