reactjs - 需要找到对该数组进行切片以仅显示 n 个客户的方法

Question

所以，我基本上只想每页只显示 5 个客户，稍后我会添加一个分页栏，但目前我只想显示 5 个客户，我尝试在 map 功能之后进行切片，但我有点新使用react并还原，我不确定是否是这样。

const Setting = ({
    itemFromPage,
    BBDDCustomer
}) => {
   console.log({BBDDCustomer});
   const renderRows = BBDDCustomer.data.map((customer, customerIndex) => { //how to slice this array 
   return (
      <tr key={customerIndex}>
          <td>{BBDDCustomer.data[customerIndex].name}</td>
          <td>{BBDDCustomer.data[customerIndex].address}</td>
          <td>{BBDDCustomer.data[customerIndex].postalCode}</td>
          <td>{BBDDCustomer.data[customerIndex].city}</td>
          <td>{BBDDCustomer.data[customerIndex].country}</td>
          <td>{BBDDCustomer.data[customerIndex].telephone}</td>
          <td>{BBDDCustomer.data[customerIndex].email}</td>
          <td><input type="checkbox" id="customerIndex" value="mod"/></td>
          <td><input type="checkbox" id="customerIndex" value="Del"/></td>
       </tr>
    );
 });
 return (
  <div>
    <Table>         
   </div>
  );
};

这是客户所在的格式文件:

    const BBDDCustomer = {
          ui_labels: {
            name: 'Name',
            address: 'address',
            postalCode: 'Postal Code',
            city: 'City',
            country: 'Country',
            telephone: 'Telephone',
            email: 'Email',
            modified: 'Modified',
            delete: 'Delete'
          },
      data: [
        {
          name: 'n1',
          address: 'a1',
          postalCode: 'PC 1',
          city: 'c 1',
          country: 'cou 1',
          telephone: 'tel 1',
          email: 'em 1'
        }
    }

Answer 1

获取子数组并渲染它比渲染整个数组并获取子数组更好。

有一个标准的 Javascript slice(from, count?) 方法来获取数组的一部分，第一个参数告诉索引开始，第二个可选参数是要包含的元素数量

你会像这样使用它:

const renderRows = BBDDCustomer.data.slice(0, 5).map((customer, customerIndex) => { ... };

它将返回前 5 个元素，您可以使用数组函数映射这些元素。