当我尝试提交表单时，它显示 TypeError: Object(...) is not a function

Question

这是我使用反应上下文 API 的简单书单应用程序。我已经为 addBook、removeBook 和整个 Book 状态创建了一个上下文，并提供给其他组件。 当我尝试通过表单添加一本书时，它显示TypeError: Object(...) is not a function

下面是我的书本上下文，我为 addBook、removeBook 和整个 BookState 创建了一个上下文，并将其提供给它的包装子组件

BookContext.js

import React, { createContext, useState } from 'react';
import  {uuid}  from 'uuid/dist/v1';

export const BookContext = createContext();

const BookContextProvider = ({ children }) => {
  const [books, setBooks] = useState([
    { id: 1, title: 'name of wind', author: 'Elizabath' },
    { id: 2, title: 'the narrow bridge', author: 'Mc clary' },
  ]);
 const addBook = (title, author) => {
    setBooks([...books, {  id: uuid(),title, author }])
  };
 const removeBook = (id) => {
    setBooks(books.filter((book) => book.id !== id))
  };
  return (
    <BookContext.Provider
      value={{ books, addBook, removeBook }}
    >
      {children}
    </BookContext.Provider>
  );
};

export default BookContextProvider;

下面是我的 bookForm.js 文件，我在其中使用了提供者的上下文并从中解构了 addBook BookForm.js

import React, { useContext, useState } from 'react';
import { BookContext } from '../Contexts/BookContext';

function BookForm() {
  const { addBook } = useContext(BookContext);
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const handleSubmit = (e) => {
    e.preventDefault();
    addBook(title, author)
    setTitle('')
    setAuthor('')
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Book Name"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Author Name"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        required
      />
      <input type="submit" value="add Book" />
    </form>
  );
}

export default BookForm;

Answer 1

您的代码似乎运行良好。我相信问题在于一个单独的部分。我建议遵循错误的堆栈跟踪，因为这应该可以为您提供更好的错误位置。或者上下文提供程序的内容比您包含的更多。

可能有另一个组件使用添加的书籍，在添加新书籍时抛出。

const { createContext, useContext, useState } = React;
const uuid = uuidv1;
const BookContext = createContext();

const BookContextProvider = ({ children }) => {
  const [books, setBooks] = useState([
    { id: 1, title: "name of wind", author: "Elizabath" },
    { id: 2, title: "the narrow bridge", author: "Mc clary" },
  ]);
  const addBook = (title, author) => {
    setBooks([...books, { id: uuid(), title, author }]);
  };
  const removeBook = (id) => {
    setBooks(books.filter((book) => book.id !== id));
  };
  return (
    <BookContext.Provider value={{ books, addBook, removeBook }}>
      {children}
    </BookContext.Provider>
  );
};

function BookForm() {
  const { addBook } = useContext(BookContext);
  const [title, setTitle] = useState("");
  const [author, setAuthor] = useState("");
  const handleSubmit = (e) => {
    e.preventDefault();
    addBook(title, author);
    setTitle("");
    setAuthor("");
  };
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Book Name"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <input
        type="text"
        placeholder="Author Name"
        value={author}
        onChange={(e) => setAuthor(e.target.value)}
        required
      />
      <input type="submit" value="add Book" />
    </form>
  );
}

function Books() {
  const { books } = useContext(BookContext);
  return (
    <div>
      {books.map(({ id, title, author }) => (
        <div key={id}>
          {title} - {author}
        </div>
      ))}
    </div>
  );
}

ReactDOM.render(
  <BookContextProvider>
    <BookForm />
    <Books />
  </BookContextProvider>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uuid/8.3.2/uuidv1.min.js" integrity="sha512-4hJwRX3o1o5dU3A+ffhCQpLzOT7U0wDoR9Ha7McoxXez011iFJ6RMB08BrzE23G+gB3gNriotihq7TPIf7x/NA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id="root" />