当我尝试提交表单时，它显示TypeError: Object(..)不是一个函数

Question

这是我使用react上下文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文件，我从提供程序中消费了上下文，并从中解构了addBookBookForm.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" />