javascript - 如何在 react 中映射索引范围？

Question

<table>
   <tbody>
   {this.state.data.map((person, i) => <TableRow key = {i} data = {person} />)}
   </tbody>
</table>

这映射了我的整个数组，但我如何从最小索引映射到最大索引？所以说我的数组有 500 个元素。我想将这个(数据)数组从索引 15 映射到 24(含)。 (所以我的屏幕上只有 10 个元素)。

编辑:这些答案很有趣..但是没有提到 .filter() 吗？我看到它可能对我想要的有所帮助，但我正试图弄清楚如何在 react 中做到这一点。

Answer 1

使用Array#slice()从 this.state.data 中提取所需值的浅拷贝。

const SubsetTable = props => {
  let {startIndex, endIndex, data} = props

  let subset = data.slice(startIndex, endIndex)

  return (
   <table>
     <tbody>
       {subset.map((person, i) => (<TableRow key = {i} data = {person} />)}
     </tbody>
   </table>
  )
}

// Since splice() is inclusive of the range given, you'll need to 
// adjust your range to include that last index if needed
// The below will grab all values in indexes 15-24, 
<SubsetTable startIndex={15} endIndex={25} data={this.state.data} />

由于您更新了关于使用 Array#filter() 的问题, filter() 要求您遍历整个集合。 Array#slice() 只会提取您想要提取的连续索引范围。 filter() 在您给出希望所有 Array 数据成员都满足并且您的集合是无序的条件时会更好。