Хочу перевести старый классовый компонент в функциональный но тут возникают проблемы с хуком useEffect
.
Старый классовый компонент:
state = {
seconds: this.props.seconds,
minutes: this.props.minutes,
}
componentDidMount() {
/* IF GAME IS NOT PLAYED ONCE AND ROUTE IS NOT CHANGED THEN START TIMER */
if(this.props.gameComplete === false && this.props.gameOver === false){
this.startTimer();
}
}
startTimer() {
this.timer = setInterval(this.tick.bind(this), 1000)
}
componentWillUnmount() {
clearInterval(this.timer);
}
Этот код работает идеально (компонент целиком не могу показать так как слишком большой).
Я написал его функциональную версию вот так:
let [seconds, setSeconds] = useState(props.seconds);
let [minutes, setMinutes] = useState(props.minutes);
let [timer,setTimer] = useState(null);
useEffect(() => {
/* IF GAME IS NOT PLAYED ONCE AND ROUTE IS NOT CHANGED THEN START TIMER */
if(props.gameComplete === false && props.gameOver === false){
const startTimer = () => {
setTimer(timer = setInterval(tick, 1000));
}
startTimer();
}
return () => {
clearInterval(timer);
}
}, []);
Этот код выводит следующее предупреждения
Assignments to the
'timer'
variable from inside React Hook useEffect will be lost after each render. To preserve the value over time, store it in a useRef Hook and keep the mutable value in the '.current' property. Otherwise, you can move this variable directly inside useEffect react-hooks/exhaustive-deps
Да я понимаю на английском присваивание внутри хука будет потеряно после каждого рендера эмммм ну тогда где присваивать если я хочу использовать альтернативу жизненного цикла componentDidMount
как написано наверху в классовом версии этого кода.
Вторая версия которая мне не понятно
Если написать вот так:
useEffect(() => {
/* IF GAME IS NOT PLAYED ONCE AND ROUTE IS NOT CHANGED THEN START TIMER */
if(props.gameComplete === false && props.gameOver === false){
startTimer();
}
return () => {
clearInterval(timer);
}
}, []);
const startTimer = () => {
setTimer(timer = setInterval(tick, 1000));
}
Выводит такую ошибку:
React Hook useEffect has missing dependencies: 'props.gameComplete', 'props.gameOver', 'startTimer', and 'timer'. Either include them or remove the dependency array react-hooks/exhaustive-deps
Я не хочу в пустой массив useEffect
-а написать свои переменные и данные которые приходит с пропсов они должны работать только один раз.
Как можно решить эту проблему ?И что я делаю не правильно?
UPD.
Функция tick в классе
tick() {
if(this.props.start === true){
let {seconds,minutes} = this.state;
this.setState({seconds:(seconds + 1)});
if(seconds === 60){
this.setState({seconds:(seconds = 0)});
this.setState({minutes:(minutes + 1)});
if(minutes === 60){
this.setState({minutes:(minutes = 0)});
}
}
}
}
Новая функция tick
const tick = () => {
if(props.start === true){
setSeconds(seconds + 1);
if(seconds === 60){
setSeconds(seconds = 0);
setMinutes(minutes + 1);
if(minutes === 60){
setMinutes(minutes = 0);
}
}
}
}