如何让useEffect在数据正确获取完成后再执行对应逻辑？

云上老周

2026-10-4

问题根源

React状态更新是异步行为，setXnaLogData执行后，当前作用域下的xnaLogData还是更新前的旧值（初始空数组），所以调用calBal时计算的是空数组的总和，自然得不到正确结果
把xnaLogData加入useEffect依赖后，每次执行effect都会调用setXnaLogData触发状态更新，状态更新又触发effect重新执行，就形成了无限循环

解决方案

不要依赖当前闭包内的旧状态计算余额，直接用接口返回的最新数据计算，同时增加边界判断避免undefined报错。

修正后完整代码

const [xnaLogData,setXnaLogData]=useState([]);
const [xnaLogMember,setXnaLogMember]=useState("");
const [balance,setBalance]=useState(0);
 
useEffect(() => {
    // 直接存cookie值到变量，不需要等状态更新再使用
    const member = Cookies.get('member_userr');
    setXnaLogMember(member);
    alert(member);

    const fetchXna = async () => {
        try {
            const response = await fetch('/xnaloginforoute');
            const json = await response.json();
            const newXnaData = json.xnacomp || [];
            setXnaLogData(newXnaData);
            // 直接用接口返回的最新数据计算余额，不用等state更新
            const sum = newXnaData.reduce((prev, current) => {
                // 加空值判断避免current.balance不存在时报错
                return prev + (Number(current?.balance) || 0)
            }, 0);
            setBalance(sum);
            console.log(newXnaData);
        } catch (err) {
            console.error('数据获取失败', err);
        }
    }

    fetchXna();
},[]);