![](/img/trans.png)
[英]Why won't my useEffect() hook fire when updating a react context value?
[英]Reactjs custom hook won't fire using an if/else in useEffect?
我在自定义挂钩中提取了我的减速器 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]);
你需要调用它。 由于您将它们定义为 function。 如下:
decreaseMinutes();
decreaseSeconds();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.