React Context消费字段失效 无法控制KPI卡片显隐

你的代码有两个核心错误，直接导致显隐控制失效：

• 违反React Hook调用规则：useContext是React Hook，仅允许在React函数组件、自定义Hook的顶层作用域调用。你把const { homeKPI1 } = useContext(AuthenticationContext);写在了模块顶层（所有组件/函数的外部），这行代码执行时不在React的组件渲染上下文中，根本拿不到Context存储的值，甚至会直接抛出Hook调用异常。
• Props传值格式错误：你写的locked: {homeKPI1}会给locked赋值一个嵌套对象{ homeKPI1: 你要的布尔值 }，而非预期的原始布尔类型。后续组件做显隐判断时，拿到的是对象不是布尔值，判断逻辑自然全部失效。
• 额外小问题：React默认导入需要大写开头，你写的import react from 'react'不符合规范，在非新版JSX转换的项目中会直接报错。

把Context取值、配置生成的逻辑全部挪到函数组件/自定义Hook的作用域内，同时修正传值格式：

import React, { useContext } from 'react';

// MUI Icons
import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';

import { Button } from '@mui/material';
import MaterialTable from '../../components/table';
import Chart from '../../components/chart/index';

import { priceVarianceChart, priceVarianceLineChart } from './chartData';

import { AuthenticationContext } from '../../store/AuthStore';

// 页面组件
export default function PriceVariancePage() {
  // 仅在函数组件顶层调用useContext，才能正确获取Context的实时值
  const { homeKPI1 } = useContext(AuthenticationContext);

  // 在组件作用域内生成动态配置，此时homeKPI1是正确的布尔值
  const priceVariance = {
    props: {
      // 直接传布尔值，不要套多余的大括号
      locked: homeKPI1,
      // 其余原有配置项保持不变
    }
  };

  // 原有页面渲染逻辑
  return (
    <div>
      {/* 你的KPI卡片、表格、图表等页面内容 */}
    </div>
  )
}

如果priceVariance是需要跨组件复用的通用配置/路由配置，不要导出静态对象，封装成自定义Hook返回动态配置即可：

// 封装配置专用Hook
export function usePriceVarianceConfig() {
  const { homeKPI1, homeKPI2 } = useContext(AuthenticationContext);
  return {
    props: {
      locked: homeKPI1,
      // 其余配置项
    }
  }
}

后续在任何需要用到该配置的函数组件里，调用const priceVariance = usePriceVarianceConfig()就能拿到带最新Context值的配置。

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