Функция интервал возвращение времени

Question

import React from 'react'
  const elems = (
       <div>
        <h1>Хай</h1>
        <h2>It is {new Date().toLocaleTimeString()}.</h2>
      </div>
  )

  setInterval(elems, 1000);

const Clock = () => {
  return(
    <>
      <button >{elems}</button>
    </>
  )
}

export default Clock

Столкнулся с проблемой:

ERROR
Unexpected identifier 'Object'
SyntaxError: Unexpected identifier 'Object'

Попрошу помощи в реализации исправления.

Answer 1

Думаю, что правильно в React нужно использовать хук useEffect для корректной обработки состояния и, в вашем случае, для "обертки" для setInterval, что-то вроде:

import React, { useState, useEffect } from 'react';

const Clock = () => {
  const [currentTime, setCurrentTime] = useState(new Date());

  useEffect(() => {
    // Функция, которая будет обновлять состояние каждую секунду
    const timerId = setInterval(() => {
      setCurrentTime(new Date());
    }, 1000);

    return () => {
      clearInterval(timerId);
    };
  }, []); 

  return (
    <div> 
      <h1>Хай</h1>
      <h2>It is {currentTime.toLocaleTimeString()}.</h2>
      {/* Если все же нужен button, поместите содержимое внутрь */}
      <button>It is {currentTime.toLocaleTimeString()}.</button>
    </div>
  );
};

export default Clock;

Answer 2

setInterval в качестве первого параметра принимает функцию, либо строку, как тело такой функции.

В коде в вопросе elems - это объект.

Так как это не функция, объект преобразуется в строку [object Object].
Данная строка не является корректной синтаксической конструкцией, поэтому и получается ошибка.

БЛОГ НА HUSL

Функция интервал возвращение времени

Ответы (2 шт):