How can I solve - Uncaught TypeError: removeIndividualBook is not a function?

Question

我在 index.js 中有 removeIndividualBook，它删除了个别书籍。此功能在 Book 组件中运行良好。

我正在创建新组件 Quantity 并尝试在那里访问 removeIndividualBook 。我将 removeIndividualBook 作为道具从 index.js 传递到 Book.js 再到 Quantity.js。

在 Quantity.js 我得到 Uncaught TypeError: removeIndividualBook is not a function

index.js

  // Remove Individual book
  const removeIndividualBook = (id) => {
    const updatedBookData = booksData.filter((book) => {
      return book.id !== id;
    });
    setBooksData(updatedBookData);
  };

<Book key={index} {...book} removeIndividualBook={removeIndividualBook}></Book>

Book.js

const Book = ({description,id,removeIndividualBook}) => {
  const clickHandler = () => {
    alert(description);
  };
      <Quantity id={id} removeIndividualBook={removeIndividualBook} />

Quantity.js

const Quantity = (id, removeIndividualBook) => {const Quantity = (id, removeIndividualBook) => {}


return (
    <>
      <button
        className="button" onClick={() => removeIndividualBook(id)}> ------>>> Error

Answer 1

正如我在您的 Quantity.js 组件中看到的那样，您的语法不好。应该是

const Quantity = ({id, removeIndividualBook}) => {

return (
    <>
      <button
        className="button" onClick={() => removeIndividualBook(id)}>
...
)

道具应该包裹在{ }中（销毁）。我认为这就是您提供的问题。

Answer 2

我用代码片段以某种方式复制了您的组件。

我认为你的问题是因为你没有正确解构道具，(id, removeIndividualBook)，它们应该是 ({id, removeIndividualBook})。

这里是 link 你可以看到它正常工作：

Code Snippet Link

希望这能解决您的问题！

How can I solve - Uncaught TypeError: removeIndividualBook is not a function?

How can I solve - Uncaught TypeError: removeIndividualBook is not a function?

javascript

components

parent-child

reactjs