在 React JS 中使用 createContext 將“值”傳遞給提供者

Question

我是 React JS 的新手，我正在嘗試了解功能組件中的createContext() 。 所以，在這里我試圖將存儲在books的當前 state 傳遞給提供者，但我想我做錯了什么。 你能幫我解決這個問題嗎？

上下文組件：

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() 。