箭头函数末尾需返回值报错：React代码重构求助

这个报错的核心原因很明确：你内层的projectList?.map箭头函数里，只有当project.id === name.id的条件满足时才返回了JSX元素，但其他分支没有任何返回值——ESLint（或者TypeScript）会要求箭头函数在所有代码路径都要有返回值，哪怕是null或者undefined。另外还有个隐藏问题：你外层的component?.projects.map也没有返回内层map的结果，所以就算内层修复了，页面上也不会渲染任何内容。

先给你最直接的修复版本，解决报错问题：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}> 
  {component?.projects.map(project => { 
    // 必须return内层map的执行结果
    return projectList?.map(name => { 
      if (project.id === name.id) { 
        return ( 
          // 记得加上唯一key，React列表渲染要求的
          <Typography variant="body2" gutterBottom key={name.id}> 
            {name.name} 
          </Typography> 
        ); 
      }
      // 不满足条件时返回null，填补所有代码路径的返回值
      return null; 
    }); 
  })} 
</DetailsBox>

不过这个写法有两个小问题：一是会生成很多null节点（React会忽略，但不够优雅），二是嵌套map的效率不高——每个项目都要遍历一遍整个projectList。推荐你用更高效的方式重构，比如先把projectList转换成以id为键的映射对象，这样可以直接通过id查找名称：

// 在组件内部（用useMemo缓存，避免每次渲染都重建映射）
const projectNameMap = React.useMemo(() => {
  if (!projectList) return {};
  return projectList.reduce((acc, project) => {
    acc[project.id] = project.name;
    return acc;
  }, {});
}, [projectList]);

// 渲染部分
<DetailsBox title={t('catalogPage.componentDetails.specs.used')}> 
  {component?.projects.map(project => {
    const projectName = projectNameMap[project.id];
    // 只渲染有匹配名称的项目
    if (projectName) {
      return ( 
        <Typography variant="body2" gutterBottom key={project.id}> 
          {projectName} 
        </Typography> 
      );
    }
    return null;
  })} 
</DetailsBox>

如果你不想用reduce，也可以用filter+find的组合，逻辑更直观：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}> 
  {component?.projects
    // 先过滤出在projectList中存在的项目
    .filter(project => projectList?.some(item => item.id === project.id))
    .map(project => {
      const matchedItem = projectList.find(item => item.id === project.id);
      return ( 
        <Typography variant="body2" gutterBottom key={project.id}> 
          {matchedItem?.name} 
        </Typography> 
      );
    })} 
</DetailsBox>

这几种方案都能解决你遇到的返回值报错问题，同时优化了代码的可读性和性能，记得给列表项加上唯一的key属性，这是React列表渲染的最佳实践哦~

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