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

Question

I am trying to pass a context object in NextJS which is using data from a useState hook, but the state variable and setState functions are undefined when consumed.我试图在 NextJS 中传递一个上下文对象，该对象使用来自 useState 钩子的数据，但状态变量和 setState 函数在使用时未定义。 This is strange since when I pass a simple variable in its place, it works fine, it is only when using useState that it is undefined.这很奇怪，因为当我在它的位置传递一个简单的变量时，它工作正常，只有在使用 useState 时它是未定义的。 So I know the context object is working, but the useState hook is not.所以我知道上下文对象正在工作，但 useState 钩子没有。

My _app.js file:我的_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;

My context.js file:我的context.js文件：

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;

My nav.js file:我的nav.js文件：

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;

This is returning the error TypeError: setActiveTab is not a function , because it is undefined.这将返回错误TypeError: setActiveTab is not a function ，因为它未定义。 As I stated earlier, if I pass a simple variable through the context it works fine so I know it is set up correctly, but the state is not passing through the context object.正如我之前所说，如果我通过上下文传递一个简单的变量，它工作正常，所以我知道它设置正确，但状态没有通过上下文对象。

What am I doing wrong with the state?我对国家做错了什么？

Answer 1

useContext is returning an object, not an array. useContext正在返回一个对象，而不是一个数组。

Instead of this而不是这个

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

Your should have this:你应该有这个：

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-09-18 21:12:54

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-09-18 21:12:54

解决方案1
1 已采纳 2020-09-18 21:12:54