Как получить данные из одного компонента в другом?

Question

[historydev]

Здравствуйте. Пытаюсь передать данные callback функцией но почему-то она всё ломает и я всегда получаю таймер по нулям:

const [timerData, setTimerData] = useState({
    seconds: 0,
    minutes: 0,
    hours: 0
  });

  const callBackTimer = data => setTimerData(data);

  useEffect(() => {
    console.log(timerData);
  },[timerData])

  const Timer = ({callback, data}) => {
    const [seconds, setSeconds] = useState(data.seconds);
    const [minutes, setMinutes] = useState(data.minutes);
    const [hours, setHours] = useState(data.hours);
    const [isActive, setIsActive] = useState(clients.length > 1);

    let toggle = () => {
      setIsActive(!isActive)
    }

    let reset = () => {
      setSeconds(0);
      setIsActive(false);
    }

    useEffect(() => {
      let interval = null;
      if (isActive) {
        interval = setInterval(() => {
          if(seconds < 60) setSeconds(seconds => seconds + 1);
          else {
            setSeconds(0);
            if(minutes < 60) setMinutes(minutes => minutes + 1);
            else {
              setMinutes(0);
              setHours(hours => hours + 1);
            }
          }
          console.log({hours, minutes, seconds});
          callback({hours, minutes, seconds});
        }, 1000);
      } else if (!isActive && seconds !== 0) {
        clearInterval(interval);
      }
      return () => clearInterval(interval);
    }, [isActive, seconds, minutes, hours, timerData]);

    return (
        <div className={'timer'}>
          <h1>{seconds}</h1>
          <h1>{minutes}</h1>
          <h1>{hours}</h1>
        </div>
    )
  }

Вызываю таймер вот так:

<Timer callback={callBackTimer} data={timerData}/>

Подскажите пожалуйста, что я сделал не так. Спасибо.

Answer 1

[Антон Горецкий]

Предположим, что Timer это компонент. Тогда, ответьте на вопрос: код который расположен выше строчки const Timer = ({callback, data}) => {
к чему относится?
Читайте правила использования хуков в документации React!

Comments

[historydev]

Вынес его в отдельный файл

[Антон Горецкий]

Попробуйте вот этоconst callBackTimer = data => setTimerData(data);
в useCallback обернуть.

[historydev]

Антон Горецкий, пробовал так изначально, сейчас таймер работает при состоянии true, но обнуляется если clients.length < 2, а должен сохраняться

[Антон Горецкий]

Значит ищите ошибку в логике работы. Возможно, где-то нужно использовать не просто больше или меньше, а больше или равно.

[historydev]

Антон Горецкий, да, поправил, спасибо!