React - 如何在过滤后获取映射项目的小计?
React - How to get subtotal of mapped items after filtering them?
我正在尝试在过滤后获取项目的小计:
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>
)})}
您可以将过滤器函数隔离在一个 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>
)})}
只需对结果数组调用 .length。
allItems.filter(filterFunction).length
或者如果你想直接在 map 函数中进行,你可以从第三个参数中获取数组
myFilteredArray.map(value, index, myArray) => (
<div>{myArray.length}</div>
)