使用.filter和.some搜索嵌套对象时过滤失效求助

问题场景 #

我有一个教师-学生的一级嵌套数据结构，想用搜索输入的query内容过滤学生，但使用filter方法后没达到预期效果，相关代码如下：

数据源代码 #

const studentunderT = [
  {
    id: 1,
    therapist_FName: 'Wonder',
    therapist_LName: 'Women',
    students: [
      { id: 1, student_LName: 'Test', student_Initial: 'BT1' },
      { id: 2, student_LName: 'Test', student_Initial: 'AL' },
    ],
  },
];

过滤渲染代码 #

{
  studentunderT.filter(post => {
    if (query === '') {
      return post;
    } else if (post.students.some(std => (
      std.student_Initial.toLowerCase().includes(query.toLowerCase())))) 
    {
      return post;
    }
  }).map((thr) => (
    <>
      {thr.students.map((stu) => (
        <Avatar color="red" key={thr.id} component={Link} to="/complete">{stu.student_Initial}
        </Avatar>
      ))
      }
    </>
  ))
}

问题原因 #

1. filter返回值不规范：filter要求返回布尔值，虽然返回对象会被隐式转为true，但写法不严谨；且无匹配场景下函数默认返回undefined（等价于false），逻辑没问题但可读性差。
2. 仅过滤教师未过滤学生：当前逻辑只保留了包含匹配学生的教师对象，但渲染时会把该教师下所有学生都展示，而非仅显示匹配的学生。
3. key值重复：学生列表的key使用了教师的thr.id，导致同一教师下的所有学生key重复，React无法正确识别列表项。

修正后的代码 #

{
  studentunderT.filter(post => {
    // 明确返回布尔值，逻辑更清晰
    if (query === '') {
      return true;
    }
    return post.students.some(std => 
      std.student_Initial.toLowerCase().includes(query.toLowerCase())
    );
  }).map((thr) => (
    // 给外层Fragment添加唯一key
    <React.Fragment key={thr.id}>
      {thr.students
        // 对学生数组再做一次过滤，只渲染匹配项
        .filter(stu => {
          if (query === '') {
            return true;
          }
          return stu.student_Initial.toLowerCase().includes(query.toLowerCase());
        })
        .map((stu) => (
          // 用学生自身的id作为唯一key
          <Avatar 
            color="red" 
            key={stu.id} 
            component={Link} 
            to="/complete"
          >
            {stu.student_Initial}
          </Avatar>
        ))
      }
    </React.Fragment>
  ))
}

补充说明 #

• 统一用toLowerCase()做大小写不敏感匹配，避免因大小写差异导致搜索漏项
• 列表项的key必须是每个项的唯一标识，这里使用学生自身的id是最合理的选择
• 空搜索时的逻辑要同时覆盖教师和学生层面，确保显示全部内容

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