我该如何解决 - Uncaught TypeError: removeIndividualBook is not a function？答案

【问题标题】：How can I solve - Uncaught TypeError: removeIndividualBook is not a function?我该如何解决 - Uncaught TypeError: removeIndividualBook is not a function？
【发布时间】：2022-02-07 04:42:16
【问题描述】：

我在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} />

数量.js

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


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

【问题讨论】：

标签： javascript reactjs components parent-child

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我用代码 sn-p 以某种方式复制了您的组件。

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

这是您可以看到它正常工作的链接：

Code Snippet Link

希望这能解决您的问题！

【讨论】：