Reactjs 自定義鈎子不會在 useEffect 中使用 if/else 觸發？

Question

我在自定義掛鈎中提取了我的減速器 function。 當我嘗試從自定義鈎子中觸發decreaseMinutes時，什么也沒有發生。 鈎子的其他功能非常困難 - 例如toggleActive - （可能是因為它們在事件處理程序中）。

知道如何解決這個問題嗎？

減速機+掛鈎組件：

import { useReducer } from "react";
import { defaultState } from "../setDefaultState";

const DECREASE_MINUTES = "decrease minutes";
const DECREASE_SECONDS = "decrease seconds";
const TOGGLE_ISACTIVE = "toggle isActive";
const RESET = "handle reset";

export const timerReducer = (state, action) => {
  switch (action.type) {
    case DECREASE_SECONDS:
      console.log("decrease sec works");
      return {
        ...state,
        seconds: state.seconds - 1,
      };
    case DECREASE_MINUTES:
      return { ...state, minutes: state.minutes - 1, seconds: 59 };
    case TOGGLE_ISACTIVE:
      return { ...state, isActive: !state.isActive };
    case RESET:
      return {
        ...state,
        seconds: action.payloads.seconds,
        minutes: action.payloads.minutes,
        isActive: !state.isActive,
      };
    default:
      return state;
  }
};
//extracted custom Hook
export function useTimer() {
  const [timerState, dispatch] = useReducer(timerReducer, defaultState);

  const decreaseSeconds = () => dispatch({ type: DECREASE_SECONDS }, console.log("decrease hook works"));
  const decreaseMinutes = () => dispatch({ type: DECREASE_MINUTES });
  const toggleActive = () => dispatch({ type: TOGGLE_ISACTIVE });
  const reset = () =>
    dispatch({
      type: RESET,
      payloads: {
        seconds: defaultState.seconds,
        minutes: defaultState.minutes,
        isActive: !state.isActive,
      },
    });

  return {
    timerState,
    decreaseMinutes,
    decreaseSeconds,
    toggleActive,
    reset,
  };
}

主要成分：

const Timer = () => {

  const { timerState, decreaseMinutes, decreaseSeconds, toggleActive, reset } = useTimer();
  const [dateState, dispatchDate] = useReducer(dateReducer, defaultState);

 useEffect(() => {
    let interval = null;

    // reduce seconds and minutes by 1
    if (timerState.isActive) {
      interval = setInterval(() => {
        if (timerState.seconds > 0) {
          decreaseSeconds; //--> this is what I'm trying to fire

          console.log("conditional works");
        } else if (timerState.seconds === 0) {
          if (timerState.minutes === 0) {
            clearInterval(interval);
          } else {
            decreaseMinutes;
          }
        }
      }, 1000);
      return () => clearInterval(interval);
    }
  }, [timerState.isActive, timerState.seconds, timerState.minutes]);

Answer 1

你需要調用它。 由於您將它們定義為 function。 如下：

decreaseMinutes();
decreaseSeconds();