Ionic-React中useEffect不触发API调用，加依赖则无限请求

一、API未触发执行的原因及修复 #

1. GET请求参数使用错误 #

你的API调用通过data字段传递user_id，但Axios的GET请求不支持data参数，GET请求的参数需要放在params中。这个错误会导致请求无法正确发送，表现为API看似未触发。

修复API调用代码：

export const wallet = (user_id:any) => instance({
    method: 'GET',
    url: `/customer/wallet_history`,
    params: user_id, // 将data替换为params
    responseType: 'json'
});

2. Ionic页面缓存导致useEffect未触发 #

Ionic页面默认开启缓存机制，当你从其他页面返回缓存页面时，组件不会重新挂载，空依赖的useEffect仅在第一次挂载时执行，因此不会再次触发API调用。

改用Ionic专属的页面生命周期钩子useIonViewDidEnter，每次进入页面都会执行：

import { useIonViewDidEnter } from '@ionic/react';

export const Wallet = (props: WalletProps) => {
    const [walletHistory, setWalletHistory] = useState<any[]>([]);
    
    useIonViewDidEnter(() => {
        console.log("is this comingggggggggggggg")
        const userId = localStorage.getItem("userid");
        if (!userId) return;
        
        const data = { user_id: userId };
        wallet(data)
        .then((response)=> {
            setWalletHistory(response.data.data)
        })
        .catch((error)=>{
            console.error("Getting error at auth: ", error);
        })
    });

    return (
        <IonPage>
            <IonContent fullscreen>
                <LoggedInHeader />
                some content
            </IonContent>
        </IonPage>
    )
}

二、添加依赖后API无限循环的原因及修复 #

原因 #

如果直接将data对象加入依赖数组，每次组件渲染时data都会被重新创建为新对象（引用地址变化），useEffect会判定依赖项更新，从而重复执行API调用，形成无限循环。

修复方案 #

将userId单独提取作为依赖项，避免使用引用类型的依赖：

export const Wallet = (props: WalletProps) => {
    const [walletHistory, setWalletHistory] = useState<any[]>([]);
    const userId = localStorage.getItem("userid"); // 提取到组件顶层，避免每次渲染重新创建

    useEffect(() => {
        if (!userId) return;
        
        console.log("is this comingggggggggggggg")
        const data = { user_id: userId };
        wallet(data)
        .then((response)=> {
            setWalletHistory(response.data.data)
        })
        .catch((error)=>{
            console.error("Getting error at auth: ", error);
        })
    }, [userId]) // 仅依赖userId，只有当userId变化时才执行

    return (
        <IonPage>
            <IonContent fullscreen>
                <LoggedInHeader />
                some content
            </IonContent>
        </IonPage>
    )
}

这样既保证了API在userId变化时重新调用，又不会因对象引用变化导致无限循环。

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