React useEffect依赖配置引发API循环与页面不更新问题

问题原因 #

• 将featured加入useEffect依赖数组时，每次setFeatured更新状态都会触发useEffect重新执行，进而再次调用fetchData更新状态，形成无限循环。
• 空依赖数组时，useEffect仅在组件挂载时执行一次，数据库更新后无法触发重新请求，导致页面不更新。

可行解决方案 #

方案1：手动触发刷新（推荐） #

用useCallback保证fetchData的引用稳定性，组件挂载时初始化数据，点击按钮时手动调用fetchData刷新。

export const App = () => {
    const [featured, setFeatured] = useState([]);

    // useCallback包裹，确保函数引用稳定
    const fetchData = useCallback(async () => {
        try {
            const response = await getAllFeatured();
            // 简化冗余的map(data=>data)写法，直接使用response.data
            setFeatured(response.data);
        } catch (err) {
            console.log(err);
        }
    }, []);

    // 组件挂载时初始化数据
    useEffect(() => {
        fetchData();
    }, [fetchData]);

    return (
        <div>
            <button onClick={fetchData}>刷新数据</button>
            {/* 此处渲染featured列表内容 */}
        </div>
    );
}

方案2：用状态标记触发刷新 #

新增一个专门的刷新触发状态，点击时更新该状态，触发useEffect执行数据请求。

export const App = () => {
    const [featured, setFeatured] = useState([]);
    const [refreshTrigger, setRefreshTrigger] = useState(0);

    const fetchData = async () => {
        try {
            const response = await getAllFeatured();
            setFeatured(response.data);
        } catch (err) {
            console.log(err);
        }
    }

    // 依赖refreshTrigger，状态更新时重新请求数据
    useEffect(() => {
        fetchData();
    }, [refreshTrigger]);

    return (
        <div>
            {/* 通过更新触发值来触发刷新 */}
            <button onClick={() => setRefreshTrigger(prev => prev + 1)}>刷新数据</button>
            {/* 此处渲染featured列表内容 */}
        </div>
    );
}

方案3：避免不必要的状态更新 #

通过对比新旧数据，只有当数据确实变化时才更新状态，打断无限循环（仅适合数据量小的场景）。

export const App = () => {
    const [featured, setFeatured] = useState([]);
    const prevFeaturedRef = useRef([]);

    const fetchData = async () => {
        try {
            const response = await getAllFeatured();
            const newFeatured = response.data;
            // 对比新旧数据，不同时才更新状态
            if (JSON.stringify(newFeatured) !== JSON.stringify(prevFeaturedRef.current)) {
                setFeatured(newFeatured);
                prevFeaturedRef.current = newFeatured;
            }
        } catch (err) {
            console.log(err);
        }
    }

    useEffect(() => {
        fetchData();
    }, [featured]);

    return (
        <div>
            <button onClick={fetchData}>刷新数据</button>
            {/* 此处渲染featured列表内容 */}
        </div>
    );
}

最佳实践 #

优先选择方案1或方案2，方案3的JSON.stringify对比性能较低，仅适合数据量小的场景。

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