React/JavaScript中匹配对象数组ID获取单课程对应作者姓名

场景说明 #

• 开发对象：React应用中的课程卡片组件
• 数据源结构：
  • courses课程数组：单个课程对象包含id、title、description、creationDate、duration、authors（存储作者唯一标识ID的数组）属性
  • authors作者数组：单个作者对象包含与ID一一对应的id属性、存储作者真实姓名的name属性
• 组件入参：已从父组件接收单个课程对象props.value，无需遍历全量courses数组
• 目标：将当前课程authors字段内的作者ID与authors数组条目匹配，解析得到对应作者的真实姓名，修复原有authorsDeHash函数匹配失效的问题

实现思路 #

优先将作者数组转换为以ID为键、姓名为值的映射结构，避免多层嵌套遍历带来的逻辑错误和性能损耗，同时做好空值、匹配失败的边界处理，配合useMemo做计算缓存避免重复计算。

可直接复用的代码实现 #

import { useMemo } from 'react';

const CourseCard = ({ value: currentCourse, authors }) => {
  // 生成作者ID-姓名映射表，仅当authors数组变更时重新计算
  const authorNameMap = useMemo(() => {
    const map = new Map();
    authors.forEach(author => {
      map.set(author.id, author.name);
    });
    return map;
  }, [authors]);

  // 独立抽离的ID反解函数，和原有函数命名保持一致
  const authorsDeHash = (authorIds) => {
    if (!Array.isArray(authorIds) || authorIds.length === 0) {
      return [];
    }
    return authorIds.map(id => {
      // 匹配失败时返回默认值，避免渲染undefined
      return authorNameMap.get(id) ?? '未知作者';
    });
  };

  // 得到当前课程的作者姓名列表
  const displayAuthorNames = authorsDeHash(currentCourse.authors);

  return (
    <div className="course-card">
      <h2>{currentCourse.title}</h2>
      <p className="course-desc">{currentCourse.description}</p>
      <div className="course-meta">
        <span>创建时间：{currentCourse.creationDate}</span>
        <span>时长：{currentCourse.duration}</span>
        <span>作者：{displayAuthorNames.join('，')}</span>
      </div>
    </div>
  );
};

export default CourseCard;

原有匹配函数失效的常见原因 #

• ID类型不匹配：比如后端返回的作者ID是数字类型，课程里存的是同值的字符串类型，用===严格相等判断时匹配失败
• 遍历逻辑错误：比如用forEach遍历匹配时没有正确收集结果，或者find遍历的判断条件写反
• 边界情况未处理：课程的authors字段为空、部分作者ID在作者数组中不存在时，代码抛出错误中断渲染
• 异步数据问题：作者数组是接口异步返回的，初次渲染时authors为空数组，数据返回后没有触发重新计算，导致匹配结果为空

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