React JS如何获取过滤后数组长度 实现筛选卡片结果动态计数

你当前代码直接读取原始数组cards的长度展示结果数，但是Array.filter()不会修改原数组，只会返回匹配筛选规则的新数组。你没有保存这个筛选后的新数组，所以计数永远是原始数组的总长度，无法随搜索条件动态更新。
另外现有代码存在一处隐性bug：map遍历的第二个参数index是数字类型的数组下标，不存在id属性，用index.id作为组件key会触发React渲染警告，甚至导致列表渲染异常。

把筛选逻辑抽离，将筛选后的结果存为独立变量，结果计数、列表渲染都复用这个筛选后的数组即可，每次搜索词或原始卡片数据变化时，筛选结果会自动重新计算，计数也会同步更新。
基础实现代码：

// 提前计算筛选后的卡片数组
const filteredCards = cards.filter(card => {
  return card.title.toLowerCase().includes(search.toLowerCase())
})

// 渲染部分
<div>
  <div>{filteredCards.length} Results</div>
  {
    filteredCards.map((card) => {
      // 请使用卡片自身的唯一标识作为key，不要用index.id
      return <CardJob 
        key={card.id}
        // 此处补全你原本需要传给CardJob组件的其他属性
      />
    })
  }
</div>

如果你的卡片数据量很大，筛选逻辑比较复杂，可以用useMemo缓存筛选结果，避免组件每次渲染都重复执行遍历筛选，优化性能：

import { useMemo } from 'react'

// 函数组件内部
const filteredCards = useMemo(() => {
  return cards.filter(card => {
    return card.title.toLowerCase().includes(search.toLowerCase())
  })
}, [cards, search]) // 仅当原始卡片数据、搜索关键词变化时，才重新执行筛选

内容的提问来源于stack exchange，提问作者Moufid sgh