如何在 React.js 中只显示一次重复的数组值

IT技术 reactjs arrays html-table tablerow
2022-07-23 02:19:04

我有一个要打印的账单，但在账单中我有我想要的“产品”数组对象，我有 3 个产品数组，然后产品名称、价格、折扣等是相同的，那么它应该只显示一个数组（行）但在“产品”数组我有一个“SrNo”。列，表示每个产品都有唯一的序列号，因此产品名称、价格、折扣等应显示在一行和“SrNo”。列显示 3 行。目前我正在使用 map() 来显示数组值，但它显示如下

产品阵列

我的 Bill_Preview.js（前端）

      <tr>
        <td style={{width:"1%"}}>Sr<br></br>No.</td>
        <td >Description Of Goods</td>
        <td >Qty</td>
        <td >Rate</td>
        <td >Disc %</td>
        <td >Amount</td>
        </tr>
        
        {/* Data row */}
  {DataForPreview &&
  DataForPreview.map((data, Id) => (

     // This Row all data i want only once if its same product except 'Prod_SrNo'

        <tr>
        <td >{Id + 1}.</td>
        <td >
          {data.Product_Comp} {data.Product}
          <br></br>
          {data.Prod_SrNo}
          <br></br>
        </td>
        <td >1</td>
        <td >{data.Price}</td>
        <td >{data.Discount}</td>
        <td >{(data.Price - (data.Price * data.Discount) / 100).toFixed(2) }</td>
        
       
        </tr>
    ))}
1个回答

您可以在映射之前过滤数组中的重复值：

function filterDuplicates(arr){
return arr.filter((item, index) => arr.findIndex(data=> data.Product === item.Product &&  data.Product_Comp === item.Product_Comp) === index);
}

function findDuplicatesRows(data){
return DataForPreview.filter(item => (data.Product === item.Product &&  data.Product_Comp === item.Product_Comp))
}


filterDuplicates(DataForPreview).map((data, Id) => (
   <tr>
         <td >{Id + 1}.</td>
         <td >
               {data.Product_Comp} {data.Product}
               <br></br>
               {findDuplicatesRows(data).map(d => (
                 <tr>{d.Prod_SrNo}</tr>
               ))}
               <br></br>
         </td>
         <td >1</td>
         <td >{data.Price}</td>
         <td >{data.Discount}</td>
         <td >{(data.Price - (data.Price * data.Discount) /100).toFixed(2)}</td>
   </tr>
))}

但是您必须计算重复项的总值，例如

计算总金额

function calcTotalAmount(data){
const amount = (data.Price - (data.Price * data.Discount) /100).toFixed(2);
const quantity = findDuplicatesRows(data).length;
return amount * quantity;
}

<td>{calcTotalAmount(data)}</td>

我认为有一种更简单的方法可以做到这一点，但要获得基本的

其它你可能感兴趣的问题
上一篇TypeError：未定义不是未定义的对象'createElement' - React Native 下一篇每次我点击刷新时，Material-UI 类名称都会不断变化