React Native+Expo布局文件useState触发无限循环的解决方法

核心原因 #

你之前的代码在组件渲染时直接调用storageUtil.getItem并执行setUsername，每次setUsername都会触发组件重新渲染，重新渲染又会重复执行这两步，形成无限循环。加if (username !== v)时，只有值变化才更新状态，能打断循环；去掉判断后就没了这个限制，直接触发了无限渲染。

优雅解决方案 #

方案1：用useEffect控制存储读取时机 #

把读取存储的逻辑放到useEffect里，只在组件挂载时执行一次，还能监听存储变化同步状态，完美避免重复渲染：

import { useState, useEffect } from 'react';
import storageUtil from './path/to/storageUtil';

export default function Layout() {
  const [username, setUsername] = useState<string | null>(null);

  useEffect(() => {
    // 组件首次挂载时读取存储
    const getUsername = async () => {
      const storedName = await storageUtil.getItem('username');
      setUsername(storedName);
    };
    getUsername();

    // Web端监听全局存储变化，跨标签页也能同步状态
    const handleStorageUpdate = (e: StorageEvent) => {
      if (e.key === 'username') {
        setUsername(e.newValue);
      }
    };
    window.addEventListener('storage', handleStorageUpdate);

    // 组件卸载时清理监听
    return () => window.removeEventListener('storage', handleStorageUpdate);
  }, []); // 空依赖数组，只执行一次

  return (
    <div>
      {username ? <span>{username}</span> : <a href="/login">登录</a>}
    </div>
  );
}

方案2：封装自定义Hook复用逻辑 #

把存储读取、状态管理、监听封装成自定义Hook，以后其他组件也能直接用，代码更整洁：

import { useState, useEffect } from 'react';
import storageUtil from './path/to/storageUtil';

// 自定义Hook：读取并监听指定key的存储值
function useStoredValue(key: string) {
  const [value, setValue] = useState<string | null>(null);

  useEffect(() => {
    const fetchValue = async () => {
      const storedVal = await storageUtil.getItem(key);
      setValue(storedVal);
    };
    fetchValue();

    const handleChange = (e: StorageEvent) => {
      if (e.key === key) setValue(e.newValue);
    };
    window.addEventListener('storage', handleChange);

    return () => window.removeEventListener('storage', handleChange);
  }, [key]);

  // 可选：提供更新存储的方法
  const updateValue = async (newVal: string | null) => {
    await storageUtil.setItem(key, newVal);
    setValue(newVal);
  };

  return [value, updateValue] as const;
}

// 在Layout组件中使用
export default function Layout() {
  const [username] = useStoredValue('username');

  return (
    <div>
      {username ? <span>{username}</span> : <a href="/login">登录</a>}
    </div>
  );
}

方案3：同步存储直接读取（仅适合简单场景） #

如果你的storageUtil.getItem是同步方法（比如基于localStorage封装的同步逻辑），可以直接在渲染时读取，省掉状态管理，但注意异步场景绝对不能这么用：

import storageUtil from './path/to/storageUtil';

export default function Layout() {
  const username = storageUtil.getItem('username'); // 必须是同步方法

  return (
    <div>
      {username ? <span>{username}</span> : <a href="/login">登录</a>}
    </div>
  );
}

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