React 發送 function 作為道具

Question

我正在嘗試學習視頻教程，但其中一部分對我不起作用。

主頁.js

import { useState, useEffect } from 'react';
import Bloglist from './components/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);
  };
  
  useEffect(() => {
    console.log('use effect ran');
  });
  
  return (
    <div className="home">
      <Bloglist blogs={blogs} title="All blogs" handleDelete="{handleDelete}" />
    </div>
  );
};

export default Home;

博客列表.js

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>Scritto da { blog.author }</p>
          <button onClick={() => handleDelete(blog.id)}>Delete blog</button>
        </div>
      ))}
    </div>
  );
};

export default Bloglist;

當我點擊“刪除博客”時，控制台顯示：Uncaught TypeError: handleDelete is not a function，為什么？

如有必要，如果可能的話，我可以發布視頻教程的鏈接

Answer 1

您的道具作為字符串（ handleDelete="{handleDelete}" ）傳入。

作為 props 傳遞的函數需要引用 function 定義本身或箭頭函數。

要使其正常工作，請刪除"使其成為：

<Bloglist blogs={blogs} title="All blogs" handleDelete={handleDelete} />

Answer 2

您將{handleDelete} string傳遞給您的Bloglist組件，而不是對handleDelete function 的引用。

您應該替換以下行：

<Bloglist blogs={blogs} title="All blogs" handleDelete="{handleDelete}" />

和

<Bloglist blogs={blogs} title="All blogs" handleDelete={handleDelete} />

Answer 3

在您的 Home.js 文件中，您已將句柄刪除 function 傳遞給 BlogList 引用。 嘗試這樣做：

 <Bloglist blogs={blogs} title="All blogs" handleDelete={handleDelete} />