React严格模式下箭头函数未返回值报错如何解决？

在React JSX严格模式中，箭头函数若存在未返回值的分支，会触发"箭头函数末尾应返回一个值"的报错，这是开发者常遇到的问题。

错误示例代码 #

contentType = id => {
    console.log('')

    if (id === 'COURSE') {
      return <div>{id}</div>
    }
    if (id === 'PROJECT') {
      return <div>{id}</div>
    }   
}

问题分析 #

上述箭头函数仅在id为'COURSE'或'PROJECT'时返回JSX元素，当id是其他值时，函数没有任何返回值，这在严格模式下会被检测为错误。React严格模式要求组件渲染相关的函数必须始终有明确的返回值，避免渲染过程中出现异常。

解决方案 #

确保函数的所有分支都有返回值，以下是几种常见的处理方式：

方式1：添加默认返回分支

在函数末尾添加兜底的返回值，处理所有未匹配的情况：

contentType = id => {
    console.log('')

    if (id === 'COURSE') {
      return <div>{id}</div>
    }
    if (id === 'PROJECT') {
      return <div>{id}</div>
    }   
    // 默认返回，可根据需求返回null、空组件或提示内容
    return null;
}

方式2：使用else语句兜底

通过else-if和else结构覆盖所有分支：

contentType = id => {
    console.log('')

    if (id === 'COURSE') {
      return <div>{id}</div>
    } else if (id === 'PROJECT') {
      return <div>{id}</div>
    } else {
      return null;
    }
}

方式3：使用switch-case结构

对于多分支判断，switch-case结构更清晰，同时确保default分支返回值：

contentType = id => {
    console.log('')

    switch(id) {
      case 'COURSE':
        return <div>{id}</div>;
      case 'PROJECT':
        return <div>{id}</div>;
      default:
        return null;
    }
}

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