React中useEffect内调用useState更新方法状态不更新问题

核心错误点 #

• useEffect依赖项格式错误
  useEffect要求第二个入参必须是依赖项数组，你当前直接传入单个变量isOverMax属于非法格式，React无法正常执行依赖比对逻辑，直接导致effect执行时机异常，这是状态无法更新的核心原因。
• 依赖项逻辑错误
  你的effect逻辑是根据booleanA、booleanB的计算结果更新isOverMax，因此依赖项应该是会影响计算结果的booleanA和booleanB，而非状态本身isOverMax。
  如果将isOverMax放入依赖数组，会触发无限循环：isOverMax更新触发effect执行 → effect内再次更新isOverMax → 重复触发effect，即使两次设置的状态值一致，也会产生不必要的重复渲染。

修复代码 #

export const useAlert = () => {
  const action = useSelector(state => state.edit.action);

  const dispatch = useDispatch();

  const booleanA = true;
  const booleanB = false;

  const [isOverMax, setIsOverMax] = useState(false);
  const reset = () => {
    dispatch(resetEditAction());
  };

  // 修正依赖格式和依赖项
  useEffect(() => {
    setIsOverMax(booleanA || booleanB);
  }, [booleanA, booleanB]); // 只在booleanA/booleanB变化时重新计算

  return [isOverMax, reset];
};

优化建议 #

如果你只是需要根据booleanA和booleanB计算得到布尔状态，没有其他副作用逻辑，可以完全省略useEffect和useState，直接计算或用useMemo缓存结果，减少不必要的重渲染，性能更优：

// 无副作用场景的简化写法
export const useAlert = () => {
  const action = useSelector(state => state.edit.action);
  const dispatch = useDispatch();

  const booleanA = true;
  const booleanB = false;

  // 直接计算即可，不需要额外状态管理
  const isOverMax = booleanA || booleanB;
  // 如果booleanA/booleanB计算成本高，可以用useMemo缓存
  // const isOverMax = useMemo(() => booleanA || booleanB, [booleanA, booleanB])

  const reset = () => {
    dispatch(resetEditAction());
  };

  return [isOverMax, reset];
};

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