Javascript 在NextJS中使用useState对象时，上下文对象为空_Javascript_Reactjs_State_Next.js_Use Context

Javascript 在NextJS中使用useState对象时，上下文对象为空

javascript reactjs next.js

Javascript 在NextJS中使用useState对象时，上下文对象为空,javascript,reactjs,state,next.js,use-context,Javascript,Reactjs,State,Next.js,Use Context,我试图在NextJS中传递一个上下文对象，该对象正在使用useState钩子中的数据，但是状态变量和setState函数在使用时是未定义的。这很奇怪，因为当我在它的位置传递一个简单的变量时，它工作得很好，只有在使用useState时它才是未定义的。所以我知道上下文对象正在工作，但是useState钩子没有我的\u app.js文件： import React from 'react'; import App from 'next/app'; import Head from 'next/hea

我试图在NextJS中传递一个上下文对象，该对象正在使用useState钩子中的数据，但是状态变量和setState函数在使用时是未定义的。这很奇怪，因为当我在它的位置传递一个简单的变量时，它工作得很好，只有在使用useState时它才是未定义的。所以我知道上下文对象正在工作，但是useState钩子没有

我的

\u app.js

文件：

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import Aux from '../hoc/Aux';
import ContextProvider from '../context/context';

class MyApp extends App {  
  
  render() {

    const { Component, pageProps } = this.props;

    return (
      <Aux>
        <Head>
          <title>MyApp</title>
        </Head>
        <ContextProvider>
          <Component {...pageProps} />
        </ContextProvider>
      </Aux>
    );

  };

};

export default MyApp;

import React, { createContext, useState } from 'react';


export const Context = createContext();

const ContextProvider = (props) => {

    const [ activeTab, setActiveTab ] = useState('OVERVIEW');

    return (    
        <Context.Provider value={{ activeTab, setActiveTab }}>      
            {props.children}    
        </Context.Provider>  
    );
};
    
export default ContextProvider;

import styled from 'styled-components';
import { Context } from '../../context/context';
import { useContext } from 'react';


const Nav = () => {

    const [activeTab, setActiveTab] = useContext(Context);

    const TourNavUl = styled.ul`
    `;

    const TourNavLi = styled.li`
    `;

    return (
        <NavUl>
            <NavLi>
                <span onClick={() => setActiveTab('OVERVIEW')}>Overview</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('ITINERARY')}>Itinerary</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('DETAILS')}>Details</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('BOOKINGS')}>Bookings</span>
            </NavLi>
        </NavUl>
    );
};

export default Nav;

我的

nav.js

文件：

import React from 'react';
import App from 'next/app';
import Head from 'next/head';
import Aux from '../hoc/Aux';
import ContextProvider from '../context/context';

class MyApp extends App {  
  
  render() {

    const { Component, pageProps } = this.props;

    return (
      <Aux>
        <Head>
          <title>MyApp</title>
        </Head>
        <ContextProvider>
          <Component {...pageProps} />
        </ContextProvider>
      </Aux>
    );

  };

};

export default MyApp;

import React, { createContext, useState } from 'react';


export const Context = createContext();

const ContextProvider = (props) => {

    const [ activeTab, setActiveTab ] = useState('OVERVIEW');

    return (    
        <Context.Provider value={{ activeTab, setActiveTab }}>      
            {props.children}    
        </Context.Provider>  
    );
};
    
export default ContextProvider;

import styled from 'styled-components';
import { Context } from '../../context/context';
import { useContext } from 'react';


const Nav = () => {

    const [activeTab, setActiveTab] = useContext(Context);

    const TourNavUl = styled.ul`
    `;

    const TourNavLi = styled.li`
    `;

    return (
        <NavUl>
            <NavLi>
                <span onClick={() => setActiveTab('OVERVIEW')}>Overview</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('ITINERARY')}>Itinerary</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('DETAILS')}>Details</span>
            </NavLi>
            <NavLi>
                <span onClick={() => setActiveTab('BOOKINGS')}>Bookings</span>
            </NavLi>
        </NavUl>
    );
};

export default Nav;

从“样式化组件”导入样式化；
从“../../Context/Context”导入{Context}；
从“react”导入{useContext}；
常量导航=（）=>{
const[activeTab，setActiveTab]=useContext（Context）；
const TourNavUl=styled.ul`
`;
const TourNavLi=styled.li`
`;
返回(
setActiveTab（'OVERVIEW'）}>OVERVIEW
setActiveTab（'行程'）}>行程
setActiveTab（'DETAILS'）}>DETAILS
setActiveTab（'BOOKINGS'）}>BOOKINGS
);
};
导出默认导航；

这将返回错误

TypeError:setActiveTab不是函数，因为它未定义。如前所述，如果我通过上下文传递一个简单变量，它工作正常，因此我知道它设置正确，但状态没有通过上下文对象
状态有什么问题吗？
useContext

返回的是对象，而不是数组

而不是这个

const [activeTab, setActiveTab] = useContext(Context);

您应该具有以下功能：

const {activeTab, setActiveTab} = useContext(Context);