React中useEffect触发Maximum update depth exceeded警告的问题求助

首先看你提供的代码，存在语法错误：loadStorageData函数内部多了一个多余的闭合大括号，这会导致代码解析异常，可能触发意外的渲染循环。先修正这个问题：

const [user, setUser] = useState(null)

useEffect(() => {
  const loadStorageData = () => {
    const storageUser = sessionStorage.getItem("@AuthFirebase:user");
    const storageToken = sessionStorage.getItem("@AuthFirebase:token");

    if (storageToken && storageUser) {
      setUser(storageUser);
    }
  };
  loadStorageData();
}, []);

接下来分析无限循环的可能原因：

• 语法错误导致的异常：之前的多余括号会让代码结构混乱，React无法正确识别useEffect的执行逻辑，进而引发重复渲染。修正语法后先测试是否解决问题。
• sessionStorage中的值被频繁修改：如果其他代码在循环修改@AuthFirebase:user或@AuthFirebase:token，会导致每次组件渲染时，loadStorageData读取到新值并调用setUser，触发重新渲染。检查是否有其他逻辑在持续修改sessionStorage。
• 组件被重复挂载：如果这个组件在父组件中被条件渲染（比如在map里未设置唯一key，或者条件判断每次都创建新组件实例），会导致组件反复挂载，useEffect每次挂载都执行，进而调用setUser。
• 不必要的状态更新：如果storageUser和当前user状态值一致，仍调用setUser会触发无意义的重新渲染。可以在更新前添加相等判断：

  if (storageToken && storageUser && storageUser !== user) {
    setUser(storageUser);
  }
  

按上述步骤排查，优先修正语法错误，再逐一验证其他可能的原因。

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