fix(community): 修复 React Hooks 顺序错误
将 Alert 组件中的 useColorModeValue Hook 调用提取到组件顶层, 避免在条件渲染中调用 Hook 导致的顺序变化问题。 ## 问题 - useColorModeValue 在 showNotificationBanner 条件渲染内部调用 - 当条件状态变化时,Hooks 调用顺序发生改变 - 触发 React 警告:Hooks 顺序改变(第 75 个 Hook 从 undefined 变为 useContext) ## 解决方案 - 将 alertBgColor 和 alertBorderColor 提取到组件顶层 - 确保所有 Hooks 在每次渲染时以相同顺序调用 - 符合 React Hooks 规则:只在顶层调用 Hooks ## 变更文件 src/views/Community/index.js: - 新增 alertBgColor 常量(第 47 行) - 新增 alertBorderColor 常量(第 48 行) - Alert 组件使用变量替代直接调用 Hook 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -44,6 +44,8 @@ const Community = () => {
|
|||||||
|
|
||||||
// Chakra UI hooks
|
// Chakra UI hooks
|
||||||
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
const bgColor = useColorModeValue('gray.50', 'gray.900');
|
||||||
|
const alertBgColor = useColorModeValue('blue.50', 'blue.900');
|
||||||
|
const alertBorderColor = useColorModeValue('blue.200', 'blue.700');
|
||||||
|
|
||||||
// Ref:用于首次滚动到内容区域
|
// Ref:用于首次滚动到内容区域
|
||||||
const containerRef = useRef(null);
|
const containerRef = useRef(null);
|
||||||
@@ -145,9 +147,9 @@ const Community = () => {
|
|||||||
borderRadius="lg"
|
borderRadius="lg"
|
||||||
mb={4}
|
mb={4}
|
||||||
boxShadow="md"
|
boxShadow="md"
|
||||||
bg={useColorModeValue('blue.50', 'blue.900')}
|
bg={alertBgColor}
|
||||||
borderWidth="1px"
|
borderWidth="1px"
|
||||||
borderColor={useColorModeValue('blue.200', 'blue.700')}
|
borderColor={alertBorderColor}
|
||||||
>
|
>
|
||||||
<AlertIcon />
|
<AlertIcon />
|
||||||
<Box flex="1">
|
<Box flex="1">
|
||||||
|
|||||||
Reference in New Issue
Block a user