React-Redux应用ReactDOM.render崩溃，render无返回值报错如何解决？

首先明确：你提供的ReactDOM.render入口代码没有问题，该报错指向你的项目中名为Input的自定义组件，在渲染执行时没有返回有效值。

排查步骤 #

• 第一步：全局搜索项目中所有命名为Input的React组件定义，逐行检查其render逻辑（函数组件就是整个函数的返回逻辑，类组件检查render方法的返回值）
• 第二步：优先排查近期修改过的Input组件相关代码，确认是否有调整返回逻辑的操作
• 第三步：如果组件存在条件渲染分支，逐一验证每个分支的返回值是否符合要求

常见错误场景与修复方案 #

场景1：箭头函数隐式返回语法错误 #

使用箭头函数写组件时，加了大括号但没有写return语句：

// 错误写法
const Input = (props) => {
  <input type={props.type} />
}
// 修复方案1：去掉大括号用隐式返回
const Input = (props) => (
  <input type={props.type} />
)
// 修复方案2：大括号内加显式return
const Input = (props) => {
  return <input type={props.type} />
}

场景2：条件渲染缺失兜底返回 #

只在部分判断分支中写了返回逻辑，其余分支无返回值：

// 错误写法
const Input = (props) => {
  if (props.hidden) return null
  // 非隐藏状态下没有返回任何内容
}
// 修复方案：补充所有分支的返回逻辑
const Input = (props) => {
  if (props.hidden) return null
  return <input type={props.type} />
}

场景3：自动分号插入(ASI)语法坑 #

return语句和返回的JSX标签之间换行了，JS自动在return后插入分号，相当于返回undefined：

// 错误写法
const Input = (props) => {
  return
    <input type={props.type} />
}
// 修复方案：返回值和return同行，或者用括号包裹返回内容
const Input = (props) => {
  return (
    <input type={props.type} />
  )
}

场景4：列表循环渲染漏写返回 #

你提到添加返回循环逻辑后出现其他报错，大概率是循环时未给列表项加唯一key属性，或者map回调函数漏写返回：

// 错误写法
{
  list.map(item => {
    <Input key={item.id} value={item.value} />
  })
}
// 修复方案：补充return和key
{
  list.map(item => (
    <Input key={item.id} value={item.value} />
  ))
}

修复验证 #

修改完Input组件后重启开发服务，确认报错消失即可。

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