React DOM显示原数组首个元素而非过滤后元素问题求助

核心问题 #

你在渲染列表时使用了数组索引index作为元素的key，这是导致DOM没有跟随状态更新的关键原因。

原因分析 #

React通过key来判断组件是否需要重新创建或更新。当你用索引作为key时，过滤后的新数组第一个元素的key仍然是0，和原数组第一个元素的key一致。React会认为这是同一个组件，只会尝试更新其内容，但如果存在状态同步的隐性问题，就会出现内容不更新的异常。

解决方案 #

将key替换为每个项目的唯一标识，比如project.id（如果你的Project类型包含唯一ID字段），如果没有ID，也可以用唯一的project.title（确保标题不会重复）：

修改后的渲染代码：

{
  projects.map((project: Project) => {      
    console.log(project.title)              
    return (              
      <div key={project.id}> {/* 替换为项目的唯一标识 */}
        <div>
          <h1>{project.title}</h1>               
        </div>                               
      </div> 
    )
  })
}

额外优化 #

你的过滤逻辑可以简化，filter方法本身会返回新数组，无需手动展开：

useEffect(() => {    
    const newArray = unfilteredProjects.filter(proj => {
      return proj.title.toUpperCase().includes(titleFilter.toUpperCase());
    })
    console.log(newArray)
    setProjects(newArray)
}, [titleFilter])

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