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
    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
    18 сен 2019 в 7:14
  • ок, я сейчас проверю
    – Mike
    18 сен 2019 в 7:25
  • залил с примером @Demon__ANT смотри
    – Mike
    18 сен 2019 в 7:53
  • 1
    Спасибо огромное за потраченное время я посмотрел ссылку и узнал много нового .Все работает.
    – Randall
    18 сен 2019 в 7:54
  • @Demon__ANT рад помочь!
    – Mike
    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
    18 сен 2019 в 6:03
  • 1
    ок, я посмотрю еще раз ;)
    – Mike
    18 сен 2019 в 6:19
  • Посмотри @Demon__ANT добавил еще вариант
    – Mike
    18 сен 2019 в 6:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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