React JS出现Unreachable code no-unreachable报错，代码渲染异常求助

安全阿岳

2026-5-28

问题分析与解决方案

嘿，我一眼就揪出你代码里的问题啦！

核心问题：提前return导致代码不可达

你在menus.map的回调函数里，第一行就写了return (<h1>...</h1>)——return语句会直接终止当前函数的执行，这就意味着后面定义subs的那段代码永远都不会被运行，这就是ESLint抛出Unreachable code no-unreachable错误的原因。

而且因为你只return了<h1>，就算这部分能渲染，子菜单的内容也根本不会被处理；当你把return换成console.log时，函数没有提前终止，所以map里的逻辑能正常执行（控制台输出正常），但因为你没有返回任何JSX元素，页面自然显示不出内容。

修复后的代码

你需要把主菜单的<h1>和子菜单的内容放在同一个返回结果里，推荐用React Fragment（<>）来包裹，避免生成多余的DOM节点：

render() {
  return (
    <div>
      { this.state.menus.map((item_main) => {
          // 直接用当前循环的item_main获取子菜单，不用通过index取值
          const subs = item_main.subs.map((item_sub) => {
              return(<h4 key={item_sub.sub_name}>{item_sub.sub_name}</h4>)
          })
          // 把主菜单和子菜单一起return
          return (
            <>
              <h1 key={item_main.main_name}>{item_main.main_name}</h1>
              {subs}
            </>
          )
        })
      }
    </div>
  );
}