React JS中AddTask组件渲染提示无返回值报错是什么原因？

问题根因 #

你在App.js中导入AddTask组件后，又定义了一个同名的函数常量AddTask，直接将导入的组件覆盖了。你定义的这个处理新增任务的函数是普通业务函数，没有返回任何JSX元素，所以渲染时触发了“render没有返回值”的报错。

修复步骤 #

1. 将App.js里定义的新增任务处理函数改名，避免和导入的组件重名，例如改为addNewTask：

// 将原来的 const AddTask =(task) =>{ 替换为下面的代码
const addNewTask =(task) =>{
  console.log(task)
}

2. 对应修改传递给组件的props绑定：

{/* 将原来的 <AddTask onAdd={AddTask}/> 替换为下面的代码 */}
<AddTask onAdd={addNewTask}/>

其他可优化的小问题 #

• 你当前AddTask.js里的表单提交事件还没有绑定到form元素上，后续写完表单校验逻辑后，要记得调用父组件传进来的onAdd方法，还要清空表单状态：

// AddTask.js的form标签补充onSubmit绑定
<form className="add-form" onSubmit={onSubmit}>

• AddTask.js里reminder的初始值你写成了字符串'false'，建议改为布尔值false，避免后续类型判断出错：

// 将原来的 const [reminder, setReminder] =useState('false') 替换为下面的代码
const [reminder, setReminder] =useState(false)

• 表单提交成功后补充清空输入框的逻辑：

// AddTask.js的onSubmit函数补充逻辑
const onSubmit = (e) => {
  e.preventDefault()
  if (!text){
    alert('Please enter task text')
    return
  }
  // 调用父组件传递的新增方法
  props.onAdd({text, day, reminder})
  // 清空表单状态
  setText('')
  setDay('')
  setReminder(false)
}

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