尝试在反应js中使用地图内部的条件

Question

我正在尝试使用 api 从我的数据库向 table 显示数据，但如果我得到 10 table 列，我想将数据限制为特定数量的示例，我只想显示 5。这是我的地图函数的一段代码：

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

const CustomerTable = (props) => {
    const{customer}=props;

  
    var leng=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 > 
    {customer.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;

我尝试了 if else 条件（尝试获取 .length），但它不起作用，因为我输入了客户数据作为来自其他 class 的道具。在此先感谢您的帮助！！

Answer 1

如果你现在是迭代前的条件，你可以对数组进行切片。

<Table.Body > 

{/* You could slice the array */}
{customer.slice(0,5).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.Body > 
{customer.map((c, index) => {
  if (index % 2 === 0) return null;

  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>

)}).filter(Boolean)}

{/* Filter the return array from map */}

        )

</Table.Body>

尝试在反应js中使用地图内部的条件

trying to use a condition inside map in react js

reactjs

react-native

dictionary

semantic-ui