Question

我有以下代码：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
  {component?.projects.map(project => {
    projectList?.map(name => {
      if (project.id === name.id) {
        return (
          <Typography variant="body2" gutterBottom classes={{}}>
            {`${name.name}`}
          </Typography>
        );
      }
    });
  })}
</DetailsBox>

我得到了Expected to return a value at the end of arrow function，我知道它是由匿名函数中的return引起的，但是如何重构它呢？

编辑：错误已分配至以下行：projectList?.map(name => {

Answer 1

警告是因为您有时只是从.map返回某些内容；结果数组当前有时会包含undefined个元素，其中散布着Typography个组件。

使用.filter来过滤不匹配的ID：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
  {component?.projects.map(project => (
    projectList
      ?.filter(name => project.id === name.id)
      ?.map(name => (
          <Typography variant="body2" gutterBottom classes={{}}>
            {`${name.name}`}
          </Typography>
      ))
  ))}
</DetailsBox>

或者，如果每对最多只有一个单个匹配项，则更合适的做法是创建一个对象或ID映射到projects项或projectList项-这会将计算复杂度从O(n)降低到O(n ^ 2)。

Answer 2

您的父函数未返回值。因此，您需要为隐式return或显式return语句使用括号：

隐含：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
  {component?.projects.map(project => (
    projectList?.map(name => {
      if (project.id === name.id) {
        return (
          <Typography variant="body2" gutterBottom classes={{}}>
            {`${name.name}`}
          </Typography>
        );
      }
    ));
  })}
</DetailsBox>

显式回报：

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
  {component?.projects.map(project => {
    return projectList?.map(name => {
        if (project.id === name.id) {
          return (
            <Typography variant="body2" gutterBottom classes={{}}>
              {`${name.name}`}
            </Typography>
          );
        }
    })
  })}
</DetailsBox>

Answer 3

尝试

<DetailsBox title={t('catalogPage.componentDetails.specs.used')}>
  {component?.projects.map(project => {
   return  projectList?.map(name => {
      if (project.id === name.id) {
        return (
          <Typography variant="body2" gutterBottom classes={{}}>
            {`${name.name}`}
          </Typography>
        );
      }
      return null
    });
    
  })}
</DetailsBox>

重构：期望在箭头函数的结尾处返回一个值

3 个答案: