React项目点击删除按钮报handleDelete is not a function错误如何解决？

错误原因 #

你在Home组件中渲染BlogList时，没有将内部定义的handleDelete函数作为props传递给子组件，导致BlogList里解构得到的handleDelete是undefined，调用时自然会抛出类型错误。

修复方法 #

修改Home组件的return部分，给BlogList补传handleDelete属性即可：

// 修改前的代码
<BlogList blogs={blogs} title='All blogs'/>

// 修改后的代码
<BlogList blogs={blogs} title='All blogs' handleDelete={handleDelete}/>

可选优化 #

你可以给BlogList的handleDelete参数设置默认空函数，避免后续漏传props时直接抛出运行时错误：

// 给handleDelete设置默认值
const BlogList = ({blogs,title,handleDelete = () => {}}) => {
    // 原有组件逻辑保持不变
}

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