React.js中map遍历添加条件限制表格数据渲染条数的实现方法

你可以直接在调用map方法前使用数组的slice方法截取前N条数据，该方法不会修改原数组，完美适配React的不可变数据流要求，同时能兼容传入的customer数组长度不足5的场景：

修改步骤 #

1. 首先在解构props时给customer加兜底空数组，避免数据未加载完成时报错
2. 对customer调用slice(0, 5)截取前5条数据后再遍历

修改后的完整代码 #

import React, {useState} from 'react'
import { Icon, Table, Menu, Select, Form,Button } from 'semantic-ui-react'

const CustomerTable = (props) => {
    // 解构时加兜底空数组，避免props无customer时报错
    const {customer = []} = props;
    // 可自定义要展示的最大条数
    const MAX_SHOW_COUNT = 5;
    
    return(
 <div style={{marginTop:'15px'}}>
  <Table celled striped>
    <Table.Header>
      <Table.Row>
      <Table.HeaderCell>Name</Table.HeaderCell>
        <Table.HeaderCell>Address</Table.HeaderCell>
        <Table.HeaderCell>Actions</Table.HeaderCell>
        <Table.HeaderCell>Actions</Table.HeaderCell>
      </Table.Row>
    </Table.Header>
      
    <Table.Body > 
    {/* 先slice截取前MAX_SHOW_COUNT条再map */}
    {customer.slice(0, MAX_SHOW_COUNT).map((c) => {
      return(
      <Table.Row key={c.id}>
        <Table.Cell>{c.name}</Table.Cell>
        <Table.Cell>{c.address}</Table.Cell>
         <Table.Cell>
            <Button color="red">Delete</Button>
         </Table.Cell>
         <Table.Cell>
            <Button color="red">Edit</Button>
        </Table.Cell>
      </Table.Row>

    )})}
    </Table.Body>

  </Table>

 
</div>
    )
}

export default CustomerTable;

说明 #

• slice(startIndex, endIndex) 方法返回从startIndex到endIndex（不包含endIndex）的新数组，当原数组长度小于endIndex时，会返回全部现有元素，不会抛出异常
• 不要使用splice方法实现该需求，splice会修改原数组，可能导致组件重复渲染、数据异常等问题
• 如果需要动态调整展示条数，只需要修改MAX_SHOW_COUNT变量的值即可，也可以将其设置为state配合下拉选择器实现自定义展示条数的功能

内容的提问来源于stack exchange，提问作者Ritcus