這里有兩個組件，一個是 Home.js，另一個是 BlogList.js 我將 handleDelete() 作為 prop 傳遞給 BlogList 并將其用作 Home.js 中的函式。
主頁.js
import {useState} from 'react';
import BlogList from './Bloglist';
const Home = () => {
const handleDelete = (id) =>{
console.log(id);
}
const [blogs ,setBlogs] = useState([
{ title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
{ title: 'Welcome party!', body: 'lorem ipsum...', author: 'Akks', id: 2 },
{ title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
])
return (
<div className="home">
<BlogList blogs={blogs} title="All Blogs"/>
<BlogList blogs={blogs.filter((blog)=>blog.author==="mario")} handleDelete={handleDelete}/>
</div>
);
}
export default Home;
博客串列.js
const BlogList = ({blogs,title,handleDelete}) => {
return (
<div className="blog-list">
<h2> {title} </h2>
{blogs.map(b=>(
<div className="blog-preview" key={b.id}>
<h2>{b.title}</h2>
<p>written by {b.author}</p>
<button onClick={()=> handleDelete(b.id)}></button>
</div>
))}
</div>
);
}
export default BlogList;
但它顯示錯誤 handleDelete is not a function
uj5u.com熱心網友回復：
由于您handleDelete是BlogList組件中的可選道具，您應該首先檢查在將其作為 onClick 處理程式傳遞給按鈕時是否定義了它：
<button onClick={handleDelete ? () => handleDelete(b.id) : undefined}></button>
此外，您應該檢查prop-typesNPM 上的包或至少是基本的打字稿，以避免將來出現類似錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/375749.html
標籤：javascript 反应