javascript - 在 React JS 中使用 createContext 将“值”传递给提供者

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;

标签： javascriptreactjsreact-propsreact-functional-component

Answer 1

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