如何修复React Hook useEffect中isSplitted变量的缺失依赖警告？

你想让useEffect只在playerCounter变化时执行，但里面用到了isSplitted导致lint警告，又不想禁用规则，这里有两种靠谱的解决办法：

方法一：用useRef跟踪最新的isSplitted值 #

通过useRef保存isSplitted的最新状态，这样在目标useEffect里既能拿到最新值，又不会因为isSplitted变化触发额外的effect执行：

const [playerCounter, setPlayerCounter] = useState(0);
const [isSplitted, setIsSplitted] = useState(false);
// 创建ref保存isSplitted的最新值
const isSplittedRef = useRef(isSplitted);

// 同步isSplitted到ref，确保ref始终是最新状态
useEffect(() => {
  isSplittedRef.current = isSplitted;
}, [isSplitted]);

useEffect(() => {
  if (playerCounter > 21) {
    // 这里用ref.current代替原变量
    if (isSplittedRef.current) {
      setCurrentPlayerHand(HANDS.SECOND);
      return;
    }
    setToggleFade(false);
    setShowResult(true);
    setIsDisabled(true);
    setMessage(MESSAGES.LOSE);
    setIsStarted(false);
  }
}, [playerCounter]);

这种方式改动小，适合简单场景，既满足了只在playerCounter变化时执行effect的需求，又能获取到isSplitted的最新值，不会触发lint警告。

方法二：用useReducer整合状态与逻辑 #

如果你的组件状态较多、逻辑关联紧密，推荐用useReducer把相关状态和处理逻辑集中管理，从根源上避免依赖问题：

// 定义初始状态
const initialState = {
  playerCounter: 0,
  isSplitted: false,
  currentPlayerHand: /* 你的初始值 */,
  toggleFade: true,
  showResult: false,
  isDisabled: false,
  message: '',
  isStarted: true
};

// 定义reducer处理状态逻辑
function gameReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_PLAYER_COUNTER': {
      const newCounter = action.payload;
      // 原useEffect里的逻辑移到这里
      if (newCounter > 21) {
        if (state.isSplitted) {
          return {
            ...state,
            playerCounter: newCounter,
            currentPlayerHand: HANDS.SECOND
          };
        }
        return {
          ...state,
          playerCounter: newCounter,
          toggleFade: false,
          showResult: true,
          isDisabled: true,
          message: MESSAGES.LOSE,
          isStarted: false
        };
      }
      return { ...state, playerCounter: newCounter };
    }
    // 处理isSplitted的切换
    case 'TOGGLE_SPLITTED': {
      return { ...state, isSplitted: !state.isSplitted };
    }
    // 其他状态操作的case
    default:
      return state;
  }
}

// 组件内使用reducer
const [state, dispatch] = useReducer(gameReducer, initialState);

// 后续更新playerCounter时，调用dispatch即可
// dispatch({ type: 'UPDATE_PLAYER_COUNTER', payload: 22 });

这种方式把分散的状态和关联逻辑整合到一起，代码结构更清晰，也不需要再写原有的useEffect，自然就没有依赖警告的问题。

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