NextJS中ContextAPI无法作用于按钮等组件的问题求助

你的代码存在两个核心问题导致组件切换功能失效，直接看修复方案：

问题根源 #

• Panelbtn未被Context Provider包裹：当前Provider仅在Panel组件内部，Panelbtn作为同级组件无法获取Context中的setShowCaja方法
• 按钮点击事件逻辑错误：直接将setShowCaja传给onClick，会导致React在组件渲染时就执行该函数，且没有实现布尔状态的切换逻辑

修复步骤 #

1. 提升Context Provider到父组件 #

将CambiarPanelCX.Provider移到主页面PrincipalP中，让Panel和Panelbtn都处于Provider的作用域内，同时把showCaja状态也存入Context，方便后续组件直接访问状态。

2. 修正按钮点击事件 #

将onClick={setShowCaja}改为onClick={() => setShowCaja(prev => !prev)}，实现点击按钮时切换布尔状态的逻辑。

修改后的完整代码 #

1. 主页面 (PrincipalP) #

'use client';
import Head from 'next/head';
import { useState } from 'react';
import './deco.css';
import Panel from '../../panel';
import Panelbtn from '@/src/panelbtn';
import { CambiarPanelCX } from '@/src/contexts/cambiarpanel';

export default function PrincipalP() {
  const [showCaja, setShowCaja] = useState(false);
  
  return (
    <>
      <Head>
        <title>Nose</title>
      </Head>
      <CambiarPanelCX.Provider value={{ showCaja, setShowCaja }}>
        <Panel />
        <Panelbtn />
      </CambiarPanelCX.Provider>
    </>
  );
}

2. Panel组件 #

'use client';
import React, { useContext } from 'react';
import './panel.css';
import Cajauno from './components/cajas';
import Cajados from './components/cajas2';
import { CambiarPanelCX } from './contexts/cambiarpanel';

function Panel() {
    const { showCaja } = useContext(CambiarPanelCX);
    return (
        <>
            <div className="displaycajas">
                {showCaja ? <Cajados /> : <Cajauno />}
            </div>
        </>
    );
}

export default Panel;

3. Panelbtn组件 #

'use client';
import React, { useContext } from 'react';
import './panel.css';
import { CambiarPanelCX } from './contexts/cambiarpanel';

function Panelbtn() {
    const { setShowCaja } = useContext(CambiarPanelCX);

    return (
        <>
            <div className="displaycajabtn">
                <button 
                    onClick={() => setShowCaja(prev => !prev)}
                >
                    Click me
                </button>
            </div>
        </>
    );
}

export default Panelbtn;

4. Context文件（可选优化） #

import { createContext } from 'react';

// 可选：添加TypeScript类型定义，避免类型错误
type CambiarPanelContextType = {
  showCaja: boolean;
  setShowCaja: React.Dispatch<React.SetStateAction<boolean>>;
};

export const CambiarPanelCX = createContext<CambiarPanelContextType>({
  showCaja: false,
  setShowCaja: () => {}
});

额外优化提示 #

• NextJS 13+ App Router中，所有使用客户端状态或Context的组件都需要添加'use client'指令
• 把代码中的class替换为className，符合React的语法规范
• 若使用TypeScript，给Context添加类型定义能提前规避很多运行时错误

内容的提问来源于stack exchange，提问作者GabFrogGo