TypeError: (X)不是函数

Question

我正在做一个简单的React项目。我现在正在尝试调用onClick函数，该函数调用handleDelete函数，该函数允许从其id中删除博客条目。

下面是BlogList组件:

const BlogList = ({blogs,title,handleDelete}) => {
return (
<div className="blog-list">
<h2>{ title }</h2>
{blogs.map((blog) => (
<div className="blog-preview" key={blog.id}>
<h2>{ blog.title }</h2>
<p>written by { blog.author}</p>
<button onClick={() => handleDelete(blog.id)}>delete blog</button>
</div>
))}
</div>
);
}
export default BlogList;

Home组件:

import { useState } from "react";
import BlogList from "./blogList";
const Home = () => {
const [blogs, setBlogs] = useState([
{ title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
{ title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
{ title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
])
const handleDelete = (id) => {
const newBlogs = blogs.filter(blog => blog.id !== id);
setBlogs(newBlogs);
}
return (
<div className="home">
<BlogList blogs={blogs} title='All blogs'/>
</div>
);
}
export default Home;

当我点击浏览器中的删除博客按钮时，我收到以下内容:

messageTypeError: handleDelete不是一个函数

我在这里错过了什么?

Answer 1

必须将处理程序作为道具传递给BlogList组件。这样的:

<BlogList blogs={blogs} title='All blogs' handleDelete={handleDelete} />