React NavBar组件为何出现两次console.log输出？

一、console.log执行两次的原因及解决 #

在React 18的开发环境中，StrictMode会自动触发组件两次渲染，目的是检测代码中潜在的副作用问题（比如未清理的定时器、重复订阅等），所以你的console.log("hi")会执行两次，这是正常的开发行为，生产环境下不会出现这个情况。

解决方式：

• 若只是调试需要，可将console.log放入useEffect并设置空依赖数组，确保仅在组件挂载时执行一次：

import { useEffect } from 'react';

export const NavBar = () => {
  const [showNav, setShowNav] = useState(false);

  const handleNavClick = () => {
    setShowNav(!showNav);
  };

  useEffect(() => {
    console.log("hi");
  }, []); // 空依赖数组，仅执行一次

  // 其余代码不变
};

• 若想彻底关闭这个行为，可以移除项目根组件外层的<StrictMode>标签，但不推荐这么做——StrictMode能帮你提前发现很多隐藏的bug。

二、handleNavClick放入useEffect导致未声明的问题 #

事件处理函数不需要放入useEffect，因为useEffect是用来处理副作用的（比如数据请求、订阅），而事件处理函数需要在组件渲染时就存在，供JSX的onClick绑定使用。

你遇到的"函数未声明"错误，是因为useEffect内部定义的函数作用域仅限于useEffect内部，JSX无法访问到它。正确的做法是保持handleNavClick在组件顶层定义，若需要优化（比如传递给子组件时避免不必要重渲染），可以用useCallback包裹：

import { useCallback } from 'react';

export const NavBar = () => {
  const [showNav, setShowNav] = useState(false);

  // 使用useCallback缓存函数，避免每次组件重渲染都创建新函数
  const handleNavClick = useCallback(() => {
    setShowNav(!showNav);
  }, [showNav]); // 依赖showNav，当showNav变化时更新函数

  // 其余代码不变
};

内容的提问来源于stack exchange，提问作者Andrés Marino