React v17函数组件无法访问props且props.onSubmit不是函数问题咨询

1 关于React v17函数组件能否使用props的疑问 #

React 所有版本均支持函数组件直接通过形参接收props，v17完全兼容该用法，不需要改用其他Hook，你对props的使用方式本身没有错误。

2 报错"props.onSubmit不是函数"的常见原因 #

• 大小写拼写不一致：JavaScript对大小写敏感，你反馈的报错信息里显示是props.OnSubmit（首字母大写O），但你实际代码中调用的是props.onSubmit（首字母小写o），如果父组件传递属性时的拼写和子组件调用时的拼写大小写不匹配，就会导致取值为undefined，调用时抛出不是函数的错误。
• 父组件未传递onSubmit属性，或传递的不是函数类型：你代码中已经打印了props，可以直接查看控制台输出的props对象中是否存在onSubmit字段，且字段类型为function。正确的父组件调用示例如下：

// 父组件参考写法
import TodoForm from './TodoForm'

function App() {
  // 定义传给子组件的提交处理函数
  const handleAddTodo = (newTodo) => {
    // 你的新增todo逻辑
    console.log('新增待办：', newTodo)
  }

  return (
    <div className="App">
      {/* 必须传递onSubmit属性，值为函数类型 */}
      <TodoForm onSubmit={handleAddTodo} />
    </div>
  )
}

3 优化建议 #

可以在调用props.onSubmit时添加可选链操作符，避免未传递属性时抛出异常：

// 修改handleSubmit内的调用代码
props.onSubmit?.({
  id: uuidv4(),
  text: input,
});

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