在 React JS 中使用 createContext 将"value"传递给提供程序

Question

我是React JS的新手，我正在努力理解功能组件中的createContext()。所以，在这里，我试图将存储在books中的当前状态传递给提供者，但我想我做错了什么。你能帮我拿这个吗？

上下文组件：

import React, { createContext, useState } from "react";
export const BookContext = createContext();
const BookContextProvider = (props) => {
const [books, setBooks] = useState([
{ title: "Book 1", id: 1 },
{ title: "Book 2", id: 2 },
{ title: "Book 3", id: 3 },
{ title: "Book 4", id: 4 },
]);
return (
<BookContext.Provider value={ books }>  //<-- Doesn't work
{props.children}
</BookContext.Provider>
);
};
export default BookContextProvider;

我想使用上下文的组件：

import React, { useContext } from "react";
import { BookContext } from "../contexts/BookContext";
const BookList = () => {
const { books } = useContext(BookContext);
return (
<div>
<ul>
{books.map((book) => (
<li key={book.id}>
{book.title}
</li>
))}
</ul>
</div>
);
};
export default BookList;

Answer 1

您没有将默认值传递给createContext()。