React中Order子组件报错TypeError: this.props.sendKitchen不是函数，求解决

嘿，我一眼就发现你问题的根源啦！你遇到的TypeError是因为父组件传递给子组件的props名称和子组件里调用的名称不匹配，这是个很容易疏忽的小细节~

咱们来拆解一下：

• 你的父组件App在渲染Order子组件时，传递的props是 sendKitchen={this.toKitchen}，也就是说子组件能拿到的props属性名叫sendKitchen；
• 但在子组件Order的sendKitchen方法里，你调用的是this.props.toKitchen(client)——这里的toKitchen根本不存在于子组件的props里，自然会触发TypeError（调用undefined的函数）。

两种快速修复方案： #

方案1：修改父组件的props传递名称

把父组件里的Order组件调用改成：

<Order toKitchen={this.toKitchen}/>

这样子组件里的this.props.toKitchen就能正确对应到父组件的toKitchen方法了。

方案2：修改子组件里的props调用名称

把子组件sendKitchen方法里的调用改成：

this.props.sendKitchen(client);

这样就能匹配上父组件传递的sendKitchen属性。

额外小建议 #

如果你怕以后再犯这种名称不匹配的错误，可以给组件的props加上类型检查（比如用PropTypes或者TypeScript），能提前帮你发现这类问题哦~

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