React新手求助：Invalid hook call错误及无刷新更新Navbar问题

核心问题 #

1. useEffect未监听localStorage变化：你写的useEffect依赖项是空数组，只会在组件首次挂载时执行一次，后续localStorage更新不会触发它重新运行，所以页面不刷新就看不到新地址。
2. Hook调用位置错误：useState是React Hook，必须直接写在函数组件的顶层作用域里，不能放在普通函数（比如CreateConnection）或者try/catch这类代码块中，这就是你报错的原因。

修复方案 #

我们让CreateConnection返回连接后的地址，由Navbar负责更新本地状态并同步到localStorage，实现无刷新更新UI。

1. 修改CreateConnection.js，返回连接后的地址 #

const CreateConnection = async () => {
  try {
    // 这里替换成你的实际连接逻辑，最终得到address数组
    const address = ["0x123456..."]; 

    window.localStorage.setItem('address', address[0]);
    return address[0]; // 返回获取到的地址
  } catch (err) {
    console.error(err);
    throw err;
  }
}

export default CreateConnection;

2. 更新Navbar.js，点击按钮时更新状态 #

import { useState, useEffect } from 'react';
import ProfileNav from './ProfileNav';
import CreateConnection from './CreateConnection';

export const Navbar = () => {
  const [connectionAddress, setConnectionAddress] = useState("");

  // 组件挂载时读取localStorage初始值
  useEffect(() => {
    const savedAddress = localStorage.getItem("address");
    if (savedAddress) {
      setConnectionAddress(savedAddress);
    }
  }, []);

  // 处理连接按钮点击
  const handleConnect = async () => {
    try {
      const newAddress = await CreateConnection();
      setConnectionAddress(newAddress); // 直接更新状态，UI自动刷新
    } catch (err) {
      console.error("连接失败:", err);
    }
  };

  return (
    <div>
      <ProfileNav address={connectionAddress} />
      <input type="submit" value="Connect" onClick={handleConnect} />
    </div>
  );
}

可选：全局监听localStorage变化（多组件同步场景） #

如果应用有多个组件需要同步localStorage的地址变化，可以添加全局监听：

useEffect(() => {
  // 读取初始值
  const savedAddress = localStorage.getItem("address");
  if (savedAddress) {
    setConnectionAddress(savedAddress);
  }

  // 监听localStorage变化
  const handleStorageChange = (e) => {
    if (e.key === "address") {
      setConnectionAddress(e.newValue);
    }
  };

  window.addEventListener('storage', handleStorageChange);

  // 组件卸载时移除监听
  return () => {
    window.removeEventListener('storage', handleStorageChange);
  };
}, []);

为什么这样可行？ #

• 在Navbar的点击事件中直接更新connectionAddress状态，React会自动触发组件重新渲染，ProfileNav就能拿到最新地址，无需刷新页面。
• CreateConnection只负责连接逻辑并返回结果，状态管理交给组件本身，完全符合React Hook的使用规则。

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