TypeError:尝试在reactjs上使用上下文API值状态来分解不可iterable实例的尝试无效

嗨，我试着用上下文api和react js上的钩子做一个简单的状态管理

我有一个名为UIcontext的上下文和一个名为home的组件容器

当我在home中创建useUIcontextStateValue的新实例时，应用程序崩溃并抛出此错误

TypeError:对不可重写实例进行分解的尝试无效

我不知道这是发生在其他应用程序中，我有相同的代码和工作，请帮助朋友

这就是背景

import React , {createContext, useContext, useReducer} from 'react';


export const UIcontext = createContext();


export const UIcontextProvider = ({reducer, initialState, children}) => {
    return (
        <UIcontext.Provider>
            {children}
        </UIcontext.Provider>
    );
};


export const useUIcontextStateValue = () => useContext(UIcontext);

import React，{createContext，useContext，useReducer}来自“React”；
export const UIcontext=createContext（）；
导出常量UIcontextProvider=（{reducer，initialState，children}）=>{
返回(
{儿童}
);
};
导出常量useUIcontextStateValue=（）=>useContext（UIcontext）；

这就是我使用它的组件

import React, {useEffect, useState} from 'react';
import { UIcontextProvider, useUIcontextStateValue } from '../../Store/UiContext';
import { Header, Logo, LandingModule, Menu } from '../../Components';

const Home = props => {

    const [showHeader, setShowHeader] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);


    const [{ submenu }, dispatch] = useUIcontextStateValue();
    const initialState = {
        submenu: false 
    };

    const reducer = (state, action) => {
        switch (action.type) {
            case 'toogleSubmenu':
            return {
                ...state,
                submenu: action.submenuState
            };

            default:
            return state;
        }
    };

    useEffect(()=>{   
        window.onscroll = function() {
            if(window.pageYOffset === 0) {
                setShowHeader(false);
            } else {
                setShowHeader(true);

            }
          }
    });

    const toogleMenu = () => {
        console.log("ANTES", menuOpen);
        setMenuOpen(!menuOpen);
        console.log("DESPUES", menuOpen);
    };

    return (
<UIcontextProvider>
             <section className="home" >
            <Header show={showHeader}/>
            <Menu open={menuOpen}/>
            <section name="landing"  className="home__landing" >
            <Logo/>
            <div className="home__landing__container-text">
            <h1>Welcome</h1>
            <div>
            <h5><span>TO ADAM'S GRAY</span><br></br> WEBSITE</h5>
            <div></div>
            </div>
            </div>
            </section> 

            <LandingModule 
            title="HELLA SLINGSHOTS" 
            subtitle="In this project I make over 35,000 slingshot each year in a variety of colors and designs."
            titleBg={hellaBG}
            productBg={hellaProductBG}
            color='#00c691'
            />
            <LandingModule 
            title="BICYCLE BOLTS" 
            subtitle="Here i make and sell metric security bolts to help
            keep components on your bicycle safe from
            opportunistic thievery."
            titleBg={bicycleBG}
            productBg={bicycleProductBG}
            color='#6140FF'
            />

            <LandingModule 
            title="SURF BRAIN" 
            subtitle="In this project I make over 35,000 slingshot each year in a variety of colors and designs."
            titleBg={hellaBG}
            productBg={hellaProductBG}
            color='#2AD9B1'
            /> 

        </section>
        </UIcontextProvider>
    );
};

export default Home;

import React，{useffect，useState}来自“React”；
从“../../Store/UiContext”导入{UIcontextProvider，useUIcontextStateValue}；
从“../../Components”导入{标题、徽标、着陆模块、菜单}；
const Home=props=>{
const[showHeader，setShowHeader]=useState（false）；
常量[menuOpen，setMenuOpen]=使用状态（false）；
const[{submenu}，dispatch]=useUIcontextStateValue（）；
常量初始状态={
子菜单：false
};
const reducer=（状态、操作）=>{
开关（动作类型）{
案例“toogleSubmenu”：
返回{
……国家，
子菜单：action.submenu
};
违约：
返回状态；
}
};
useffect（（）=>{
window.onscroll=函数（）{
如果（window.pageYOffset==0）{
设置显示标题（假）；
}否则{
设置显示标题（真）；
}
}
});
常量toogleMenu=（）=>{
console.log（“ANTES”，menuOpen）；
设置菜单打开（！菜单打开）；
console.log（“DESPUES”，menuOpen）；
};
返回(
欢迎
到亚当·格雷的网站
);
};
导出默认主页；

Hi这里一切似乎都很好。你能创建fiddle或code沙盒吗？这样我就可以调试并帮助你超越@ShubhanuSharma的评论，同时也可以简化Home组件以缩小问题范围。我最终修复了，我将提供程序移到了应用程序组件，因为某些原因在容器级别无法工作