React提交表单报错createProfile is not a function 问题排查

Uncaught TypeError: createProfile is not a function
    at onSubmit (CreateProfile.js:47:1)
    at onSubmit (CreateProfile.js:58:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

报错是组件接收props的写法错误导致的：

• React函数组件仅接收1个入参，即包含所有传入属性的props对象。你写的const CreateProfile = (createProfile, navigate) => {}，是把整个props对象直接赋值给了名为createProfile的变量，第二个参数navigate实际永远是undefined。
• 不管是redux connect注入的createProfile action，还是withRouter注入的navigate路由方法，都挂在同一个props对象上，不能拆成两个独立参数接收。此时你在onSubmit里调用的createProfile其实是整个props对象，当然不是函数，直接触发类型错误，函数内部的日志自然也不会执行。

直接修改组件入参，从props对象里解构出需要的两个属性即可：

// 原错误写法
// const CreateProfile = (createProfile, navigate) => {

// 修改为正确解构写法
const CreateProfile = ({ createProfile, navigate }) => {

改完后createProfile就能正常被识别为注入的action函数，逻辑可以正常执行。

另外还有两处容易踩的笔误，建议同步修正：

• profile action里POST请求的路径写的是/profile，和同文件下GET请求的/api/profile/me路径前缀不一致，大概率漏了/api前缀，会直接导致接口404，建议改成/api/profile。
• 创建/更新成功后调用setAlert时只传了提示文案，没传类型参数，如果你的alert组件依赖type字段渲染样式，需要补上对应类型，比如dispatch(setAlert(edit ? "Profile Updated" : "Profile Created", "success"))。

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