已添加render逻辑却报Nothing was returned from render错误如何解决？

云原生阿岚

2026-10-5

React Nothing was returned from render 报错原因与解决方法

Nothing was returned from render. This usually means the return statement is missing

触发原因

该报错核心本质是React组件渲染时没有返回合法的可渲染值，常见触发场景如下：

条件分支没有兜底返回：仅在部分if/else判断分支中写了return语句，剩余分支无任何返回值
return后直接换行：JS的自动分号插入机制会把单独一行的return识别为return;，后续的JSX内容不会被作为返回值处理
数组map回调无返回：用map渲染列表时，回调函数使用大括号包裹逻辑但没有显式写return，或者语法书写错误导致返回值为空
组件引用异常：组件导出/导入时拼写错误，导致渲染的实际是undefined等非合法值

解决方案

针对上述场景，可逐一排查修复：

补全所有条件分支的返回值，不需要渲染内容时统一返回null作为兜底

// 修复后示例
function UserCard({isLogin}) {
  if (isLogin) {
    return <div>用户已登录</div>
  }
  return null // 未登录分支兜底返回
}

调整return语法，避免返回内容和return关键字分开展示，多行JSX用括号包裹

// 修复后示例
function Page() {
  return (
    <div className="container">
      <h1>页面标题</h1>
    </div>
  )
}

数组map渲染时保证回调有返回值，可选择箭头函数隐式返回或者显式写return

// 隐式返回示例（用小括号代替大括号）
function GoodsList({list}) {
  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.goodsName}</li>
      ))}
    </ul>
  )
}

// 显式return示例
function GoodsList({list}) {
  return (
    <ul>
      {list.map(item => {
        return <li key={item.id}>{item.goodsName}</li>
      })}
    </ul>
  )
}