Блог

Я хочу непрерывно изменять дочерний цвет <h1></h1> дочернего элемента через 1 секунду. Я написал код в React, но он не работает должным образом. Вот данный код:

 var time = new Date().toLocaleTimeString();

function App(){
    var [ctime, updateTime] = useState(time);
    var [color, setColor] = useState('#'   Math.floor(Math.random()*16777215).toString(16));

    var updatedTime = () => {
        time = new Date().toLocaleTimeString();
        color = '#'   Math.floor(Math.random()*16777215).toString(16)
        updateTime(time);
        setColor(color);
    }


    setInterval(updatedTime,1000);
    return(
        <h1 style = {{textAlign: 'center', color : `${color}`}}>{ctime}</h1>
      );
}
  

Я вернул из функции приложения <h1></h1> тег jsx, подобный этому:

 return(
      <h1 style = {{textAlign: 'center', color : `${color}`}}>{ctime}</h1>
    );
  

Здесь ctime работает правильно, но color работает, но неправильно.
В течение первых 2 или 3 секунд color изменения происходят идеально, но после этого скорость изменения color увеличивается экспоненциально.

Любое решение, пожалуйста?

Попробуйте использовать useEffect только для вызова setInterval один раз.

 import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  var [ctime, updateTime] = useState();
  var [color, setColor] = useState(
    "#"   Math.floor(Math.random() * 16777215).toString(16)
  );

  var updatedTime = () => {
    const time = new Date().toLocaleTimeString();
    const ccolor = "#"   Math.floor(Math.random() * 16777215).toString(16);
    updateTime(time);
    setColor(ccolor);
  };

  useEffect(() => {
    const inter = setInterval(updatedTime, 1000);
    return () => {
      clearInterval(inter);
    };
  }, []);

  return <h1 style = {{textAlign: 'center', color : color}}>{ctime}</h1>;
}

  

в реальном времени: https://codesandbox.io/s/quizzical-blackburn-k11dj?file=/src/App.js:0-656