0

Хочу перевести старый классовый компонент в функциональный но тут возникают проблемы с хуком 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);
                }
            } 
        }
    }
1
  • что в функции tick происходит, много логики? @demon
    – Mike
    Commented 17 сент. 2019 в 14:42

2 ответа 2

1

Посмотреть можно тут https://repl.it/@MikePodgorniy/hookTest

import React, { Component, useRef, useCallback, useEffect, useState } from 'react';

const TestComp = props => {
  const [seconds, setSeconds] = useState(0);
  const [minutes, setMinutes] = useState(0);
  const propsRef = useRef(props);
  useEffect(() => {
    propsRef.current = props;
  });

  // Апдейтим время с помощью callbackFunc
  const tick = useCallback(() => {
    if (propsRef.current.start === true) {
      setSeconds(s => {
        if (s >= 59) {
          setMinutes(m => (m === 60 ? 0 : m + 1));
          return 0;
        }
        return s + 1;
      });
    }
  }, [setSeconds, setMinutes, propsRef]);

  // ref создан один раз, можно не боятся добавляться его в зависимость к хукам
  const timerRef = useRef();
  // создаем и стопаем таймер в любом месте
  const startTimer = useCallback(() => {
    timerRef.current = setInterval(tick, 1000);
  }, [timerRef, tick]);
  const clearTimer = useCallback(() => clearInterval(timerRef.current), [timerRef]);

  useEffect(() => {
    if (propsRef.current.gameComplete === false && propsRef.current.gameOver === false) {
      startTimer();
    }
    return () => clearTimer();
  }, [propsRef, startTimer, clearTimer]);
  return (
    <div>{`${minutes}:${seconds}`}</div>
  );
};

class App extends Component {
  render() {
    return (
      <div className="App">
        <TestComp start gameComplete={false} gameOver={false} />
      </div>
    );
  }
}

export default App;

5
  • А тут ошибка при рендере console.error даже не warn <<An effect function must not return anything besides a function, which is used for clean-up. You returned: [object Object]>>
    – Randall
    Commented 18 сент. 2019 в 7:14
  • ок, я сейчас проверю
    – Mike
    Commented 18 сент. 2019 в 7:25
  • залил с примером @Demon__ANT смотри
    – Mike
    Commented 18 сент. 2019 в 7:53
  • 1
    Спасибо огромное за потраченное время я посмотрел ссылку и узнал много нового .Все работает.
    – Randall
    Commented 18 сент. 2019 в 7:54
  • @Demon__ANT рад помочь!
    – Mike
    Commented 18 сент. 2019 в 11:29
1

А что если так? Решений может быть много, это просто парочка из них Проблема в том что tick нужно добавить как зависимость или объявить внутри useEffect и не использовать присваивание и внешние функции в useEffect.

подробно в faq и там многое можно подчеркнуть: https://reactjs.org/docs/hooks-faq.html#what-can-i-do-if-my-effect-dependencies-change-too-often

//v1
const propsRef = useRef(props);
const tick = useCallback(() => {...}, []);
useEffect(() => {
  let timer;
  if(
    propsRef.current.gameComplete === false && 
    propsRef.current.gameOver === false
  ) { 
    timer = setInterval(tick, ...);
  }
  return () => clearInterval(timer);
}, [tick]);


//v2
const propsRef = useRef(props);

useEffect(() => propsRef.current = props);

useEffect(() => {
  const tick = () => {
    propsRef.current ... //ваша логика
  }
  let timer;
  if(
    propsRef.current.gameComplete === false && 
    propsRef.current.gameOver === false
  ) { 
    timer = setInterval(tick, ...);
  }
  return () => clearInterval(timer);
}, []);

3
  • Спасибо большое за ответ (+1) в функции tick проста таймеры я добавил его код в вопрос.Ваш ответ хорош но проблема в том что я должен чистить (clearInterval)не только там а внутри самого return -а .
    – Randall
    Commented 18 сент. 2019 в 6:03
  • 1
    ок, я посмотрю еще раз ;)
    – Mike
    Commented 18 сент. 2019 в 6:19
  • Посмотри @Demon__ANT добавил еще вариант
    – Mike
    Commented 18 сент. 2019 в 6:49

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.