0

useState フックからのデータを使用している NextJS でコンテキスト オブジェクトを渡そうとしていますが、消費時に状態変数と 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未定義であるため、これはエラーを返しています。前に述べたように、コンテキストを介して単純な変数を渡すと正常に動作するため、正しく設定されていることがわかりますが、状態はコンテキスト オブジェクトを通過していません。

私は州で何が間違っていますか？

4

1 に答える 1