为什么React组件渲染时count出现两次且添加计数器后toggle功能失效

AI 小北

2026-10-1

问题修复方案

1 修复onClick事件绑定错误
你当前的onClick写法使用了逗号操作符，只会执行最后一个传入的setCount函数，CustToggle完全没有被调用，这是toggle功能失效的核心原因。
修正写法：

<CustomNavButtonRight 
  navbutton={custButton} 
  onClick={() => {
    CustToggle()
    setCount(prev => prev + 1)
  }}  
/>

同时setCount使用函数式更新，避免闭包捕获旧的custCount值导致计数错误。

2 修正组件参数解构语法错误
React函数组件仅接收一个props参数，你写的第二个{children}参数属于语法错误，正确的解构写法如下：

const Navbar = ({ custOrFalse, children, ...restProps }) => {
  // 其他逻辑不变
  const [custOrFalseState, makeCustToggle] = useState(custOrFalse); // 建议state名和props名区分开避免混淆
  // 后续用到原custOrFalse state的地方都换成custOrFalseState
}

同时建议state命名和props命名区分开，避免变量名冲突导致逻辑混乱。

3 控制台异常输出的原因
你当前的打印逻辑写在组件顶层，每次组件重渲染都会执行：
- 首次渲染时：countFirst为true、custCount为0，所以先输出true、再输出0
- 如果使用了React 18的开发环境严格模式，组件会默认执行两次渲染，或者你有其他状态更新触发了重渲染，就会输出第三次的false（此时custCount已经变成1，countFirst为false）
  如果你只是需要判断是否是首次渲染，不需要额外使用计数器，用useRef标记更准确，不会被重渲染影响：

import { useRef, useEffect } from 'react'
// 组件内
const isFirstRender = useRef(true)
useEffect(() => {
  isFirstRender.current = false
}, [])

// 渲染判断逻辑改成，即可实现首次渲染不展示未完成的DLogin组件
{!isFirstRender.current && !custOrFalseState && <DLogin/>}

4 补充优化点
不要把props的值直接作为state的初始值后就完全脱离props管控，如果后续父组件传入的custOrFalse变化，你的state不会同步更新，如果需要同步可以添加useEffect监听：

useEffect(() => {
  makeCustToggle(custOrFalse)
}, [custOrFalse])

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