为什么这个解构属性不起作用

Question

当我尝试在 booklis.jsx 中解构 Bookcontext 时，它不起作用并显示：

TypeError: 无法解构 'Object(...)(...)' 的属性 'books' 因为它是未定义的。

bookcontext.jsx

// 功能组件

import { createContext, useState } from "react";

export const Bookcontext = createContext();


const BookcontextProvider = (props) => {
    const [books, setBook] = useState([
        { title: ' Name of the wind ', id: 1 },
        { title: ' Name of the Blind ', id: 2 },
        { title: ' Name of the Love', id: 3 },
        { title: ' Name of the Shine  ', id: 4 },
    ])
    return (
        <div>
            <BookcontextProvider value={{ books }}>
                {props.childrean}
            </BookcontextProvider>
        </div>
    );
};

export default BookcontextProvider;

booklis.jsx

import React, { useContext } from "react"; 从“../Context/Themcontext”导入{ Themcontext }； 从“../Context/Bookcontext”导入{ Bookcontext }；

/// 如何在函数组件中使用上下文 野兔是demu

const Booklis = () => {
  const { isLightThem, light, dark } = useContext(Themcontext);

  const { books, setbook } = useContext(Bookcontext);
  const theme = isLightThem ? light : dark;

  return (
    <div>
      <div
        className="book-list"
        style={{ color: theme.sintex, background: theme.bg }}
      >
        <ul>
          {books.map((boe) => {
            return (
              <li key={boe.id} style={{ background: theme.ui }}>
                {boe.title}{" "}
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default Booklis;

Answer 1

useContext(Bookcontext); 将返回您传递给提供者的值。

所以如果你的提供者看起来像

 <BookcontextProvider value={{ books }}>
       {props.childrean}
 </BookcontextProvider>

useContext 只会将书籍作为该对象的一部分返回..

您需要像这样将 setBook 添加到值中

<BookcontextProvider value={{ books, setBook }}>
       {props.childrean}
 </BookcontextProvider>

Answer 2

您有几个拼写错误，但其中最重要的是：childrean。应该是children。

你没有从你的上下文提供者返回正确的东西。

<BookcontextProvider value={{ books }}>
    {props.children}
</BookcontextProvider>

应该是

<Bookcontext.Provider value={{ books }}>
    {props.children}
</Bookcontext.Provider>

最后，你没有用你的提供者包装 Booklist 组件，你应该这样做。

const Bookcontext = React.createContext();

const BookcontextProvider = (props) => {
  const [books, setBook] = React.useState([
    { title: " Name of the wind ", id: 1 },
    { title: " Name of the Blind ", id: 2 },
    { title: " Name of the Love", id: 3 },
    { title: " Name of the Shine  ", id: 4 }
  ]);
  
  return (
    <div>
      <Bookcontext.Provider value={{ books }}>
        {props.children}
      </Bookcontext.Provider>
    </div>
  );
};

function Booklist() {
  const { books } = React.useContext(Bookcontext);

  return (
    <div>
      <div className="book-list">
        <ul>
          {books.map((book) => {
            return <li key={book.id}>{book.title} </li>;
          })}
        </ul>
      </div>
    </div>
  );
};

function Main() {
  return (
    <BookcontextProvider>
      <Booklist />
    </BookcontextProvider>
  );
}

ReactDOM.render(
<Main />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root" />

另外，如果你想更新书单，你应该通过你的上下文传递 setter 函数。

<Bookcontext.Provider value={{ books, setBooks }}>

const Bookcontext = React.createContext();

const BookcontextProvider = (props) => {
  const [books, setBook] = React.useState([
    { title: " Name of the wind ", id: 1 },
    { title: " Name of the Blind ", id: 2 },
    { title: " Name of the Love", id: 3 },
    { title: " Name of the Shine  ", id: 4 }
  ]);
  
  return (
    <div>
      <Bookcontext.Provider value={{ books, setBook }}>
        {props.children}
      </Bookcontext.Provider>
    </div>
  );
};

const Booklist = () => {
  const { books, setBook } = React.useContext(Bookcontext);
  const [inputValue, setInputValue] = React.useState("");

  function addBook() {
    setBook((prev) => [...prev, { id: prev.length + 1, title: inputValue }]);
    setInputValue("");
  }

  return (
    <div>
      <div className="book-list">
        <ul>
          {books.map((book) => {
            return <li key={book.id}>{book.title} </li>;
          })}
        </ul>
        <div>
          <input
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
          />{" "}
          <button onClick={addBook}>Add new book</button>
        </div>
      </div>
    </div>
  );
};

function Main() {
  return (
    <BookcontextProvider>
      <Booklist />
    </BookcontextProvider>
  );
}

ReactDOM.render(
<Main />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="root" />