booklis.jsx中解构Bookcontext时报对象未定义的TypeError如何解决？

报错现象 #

开发React项目时，在booklis.jsx组件中尝试解构Bookcontext的books属性，页面功能无法正常运行，控制台抛出报错：

TypeError: 无法从'Object(...)(...)'中解构'books'属性，因为该对象为undefined。

关联代码片段 #

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";
import { Themcontext } from "../Context/Themcontext";
import { Bookcontext } from "../Context/Bookcontext";

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;

问题定位与修复 #

逐行核对代码后，可定位到以下几处直接触发报错的问题：

• Provider 调用方式错误：自定义上下文Provider组件内部，错误地将自身组件作为JSX标签使用，正确的上下文传递标签应该是从创建的Context实例上获取的Bookcontext.Provider，错误的标签写法会导致上下文值无法正确传递，消费端拿到的默认值为undefined，触发解构报错。
• React props 拼写错误：渲染子组件时取的是props.childrean，React预留的子节点属性为props.children，拼写错误会导致所有内部子组件无法被正确渲染，也无法被上下文Provider的作用域包裹。
• 字段命名不匹配：Provider传入的value值仅包含books字段，消费端解构时额外取了不存在的setbook字段；同时useState定义的状态更新函数为setBook（大写B），命名和消费端的setbook（小写b）存在大小写差异，需要统一。
• 作用域检查提醒：需确认项目根入口处（通常为App.jsx或index.jsx）已正确用BookcontextProvider包裹根组件，避免消费组件处于上下文作用范围之外。

内容的提问来源于stack exchange，提问作者JIM