[英]Context object is empty when using useState object in 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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.