reactjs - TypeError：对ReactJS上具有CONTEXT API值状态的不可迭代实例进行解构的无效尝试(TypeError: Invalid attempt to destructure non-iterable instance with CONTEXT API value state on reactjs)

Question

Hi i try to make a simply state managment with context api and hooks on react js.

(嗨，我尝试使用上下文api和react js上的钩子进行简单的状态管理。)

I have a context named UIcontext and one component container called home.

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

when i do the new instance of useUIcontextStateValue in home, the app crash and throw this error

(当我在家中执行useUIcontextStateValue的新实例时，应用程序崩溃并抛出此错误)

TypeError: Invalid attempt to destructure non-iterable instance

(TypeError：无效的尝试重构不可迭代的实例)

I have no idea this is happen, in other app i have the same code and work, please help friend.

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

this is the context

(这是上下文)

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);

and this is the component where i use it

(这是我使用它的组件)

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;

  ask by Santiago translate from so

Answer 1

等待大神答复