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

【问题标题】：Passing "value" into provider using createContext in React JS在 React JS 中使用 createContext 将“值”传递给提供者
【发布时间】：2020-11-14 14:39:54
【问题描述】：

我是 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;

【问题讨论】：

标签： javascript reactjs react-props react-functional-component

【解决方案1】：

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

【讨论】：