React - 如何在过滤后获取映射项目的小计？

Question

我正在尝试在过滤后获取项目的小计：

const total = (allItems.reduce((total, item) => total + item.price, 0)).toFixed(2);

这是过滤器：

{allItems
  .filter((items) => {
    if(items.name.toLowerCase().includes(query)){
      return items
      } 
   })
   .map((item, i) => {
        return(
        <div className='item' key={Math.random()} id={Math.random()}> 
          <div className='text'>{i+1}. {item.name} </div>
          <div className='number'> {(Math.round(item.price * 100) / 100).toFixed(2)} </div>
        </div>
      )})}

Answer 1

您可以将过滤器函数隔离在一个 const 中，然后对其进行操作：

const filteredItems = allItems
  .filter((items) => {
    if(items.name.toLowerCase().includes(query)){
      return items
      } 
   })

const filteredTotal = filteredItems.reduce((total, item) => total + item.price, 0)).toFixed(2)

然后在您的渲染中：

{filteredItems.
   .map((item, i) => {
        return(
        <div className='item' key={Math.random()} id={Math.random()}> 
          <div className='text'>{i+1}. {item.name} </div>
          <div className='number'> {(Math.round(item.price * 100) / 100).toFixed(2)} </div>
        </div>
      )})}

Answer 2

只需对结果数组调用 .length。

allItems.filter(filterFunction).length

或者如果你想直接在 map 函数中进行，你可以从第三个参数中获取数组

myFilteredArray.map(value, index, myArray) => (
  <div>{myArray.length}</div>
)

React - 如何在过滤后获取映射项目的小计？

React - How to get subtotal of mapped items after filtering them?

reactjs

filter

reduce

array.prototype.map

subtotal