在NextJS

问题描述

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

我的_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;

我的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;

我的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;

这将返回错误TypeError: setActiveTab is not a function,因为它是未定义的。如前所述,如果我在上下文中传递一个简单变量,则它可以正常工作,因此我知道它已正确设置,但状态并未通过上下文对象传递。

我在做错什么事情?

解决方法

useContext返回一个对象,而不是数组。

代替这个

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

您应该有这个:

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

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...