useEffect绑定useState依赖未变更仍在组件渲染时执行问题咨询

开发者阿泽

2026-9-24

问题原因

React 官方定义的 useEffect 执行规则就是：

首次组件挂载完成后，必然执行一次回调
后续每次依赖项数组中的值发生变化时，会再次执行回调

你当前代码中activeLottery的初始值为undefined，首次渲染就会命中第一次的执行逻辑，属于正常表现，和你预期的「仅变更时触发」不符。

解决方案

提供两种常用的落地方案：

方案1：添加状态有效值判断（更推荐，逻辑更简洁）

如果你的业务中activeLottery的有效值一定不为undefined/null，直接在useEffect回调中加前置判断即可：

const [ activeLottery, setActiveLottery ] = useState();
useEffect(() => {
    // 无有效值时直接跳过执行
    if (!activeLottery) return;
    console.log('fetching')
    // 此处写API请求逻辑
}, [activeLottery])

方案2：用ref标记跳过首次渲染

如果undefined属于activeLottery的有效值，可以用ref标记首次渲染状态，跳过第一次执行：

import { useState, useEffect, useRef } from 'react';

const [ activeLottery, setActiveLottery ] = useState();
const isFirstRender = useRef(true);

useEffect(() => {
    // 跳过首次渲染的执行
    if (isFirstRender.current) {
        isFirstRender.current = false;
        return;
    }
    console.log('fetching')
    // 此处写API请求逻辑
}, [activeLottery])