Framer Motion过滤对象数组后UI无法恢复显示数量问题排查

核心问题定位 #

你的问题根源在于两处关键代码错误，结合后干扰了Framer Motion的动画逻辑与React的组件渲染机制：

• ServicesCard的Key值错误：你用servicesList.title作为列表项的key，这是一个全局固定值，React无法通过它区分不同的筛选按钮，导致状态更新时渲染逻辑混乱。
• ProjectCard的参数传递错误：渲染时把整个project对象传给了index属性，在ProjectCard里用index * 0.5计算动画延迟时，对象与数字相乘会得到NaN，直接导致Framer Motion的动画配置失效，进而引发组件渲染异常。
• 额外风险：ProjectCard使用project.index作为key，若存在项目index重复的情况，会进一步破坏React的diff算法。

修复步骤 #

1. 修正ServicesCard的Key值 #

改用单个service的唯一标识作为key（比如service.title，假设每个服务标题唯一）：

{servicesList.map((service, index) => (
  <ServicesCard key={service.title} index={index} {...service} onSelect={setSearch} />
))}

2. 修正ProjectCard的参数与Key值 #

把循环的索引值传给ProjectCard的index属性，同时使用项目的唯一标识（如project.name）作为key：

{filteredProjects.map((project, index) => (
  <ProjectCard key={project.name} index={index} {...project} />
))}

3. 优化筛选逻辑（可选） #

当前search === "all"时返回project.categories的逻辑存在隐患（若categories为空值会过滤掉项目），建议改为直接返回true以确保显示所有项目：

const filterProjects = projects.filter((project) => {
  if (search === "all") {
    return true;
  }
  return project.categories === search;
});

修复原理 #

• React依赖唯一key值识别列表项，正确的key能保证组件更新时的复用逻辑正常，避免渲染丢失。
• Framer Motion的动画参数需要有效数值，修正后index * 0.5能生成合法的动画延迟，确保动画与组件渲染逻辑兼容。

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