使用useFocusEffect与AsyncStorage时出现无限循环问题

你的问题核心在于useFocusEffect的回调函数未保持引用稳定，结合状态更新触发的组件重渲染，形成了循环触发的逻辑：

1. 组件首次渲染时，useFocusEffect执行回调，调用getCarNames更新carNames状态
2. 状态更新触发组件重渲染，此时useFocusEffect的回调会被重新创建（因为它是组件内部的匿名函数）
3. React Navigation检测到回调引用变化，会重新订阅焦点事件，再次执行回调并更新状态，最终导致无限循环

修复方案 #

将useFocusEffect的回调用useCallback包裹，并指定空依赖数组（无外部依赖时），确保回调引用稳定：

import { useFocusEffect } from '@react-navigation/native';
import { useState, useCallback } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

const YourComponent = () => {
  const [carNames, setCarNames] = useState([]);

  useFocusEffect(
    useCallback(() => {
      async function getCarNames() {
        const cars = await AsyncStorage.getAllKeys();
        setCarNames(cars);
      }
      getCarNames();
    }, []) // 空依赖数组保证回调仅在屏幕聚焦时执行，不受组件重渲染影响
  );

  return (
    // 组件渲染内容
  );
};

原理说明 #

• useCallback会缓存回调函数的引用，避免组件重渲染时回调被反复创建
• 空依赖数组表示回调不依赖任何外部变量，仅会在屏幕首次获得焦点、组件挂载后屏幕重新聚焦时执行，彻底切断状态更新与钩子重复触发的循环

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