Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Calculadora

0

114
Vistas
Problem with React useState (Changing between new & old value of state)

I want to make app for display live app on big devices. I just create the function for checking time for every second (just for sim).

Time state work fine in display, but if I check the artist "right now" here is a problem. Every time when state is updated, displayed name is jumping between new and old state.

Where is the problem? Thanks...

import React, { useState } from "react";
import Artist from "../Artist";
import Database from "../Data.json"


const Engine = () => {


    const [data, setData] = useState(Database);

    const [hour, setHour] = useState(null);
    const [minute, setMinute] = useState(null);
    const [second, setSecond] = useState(null);


    const [nowArtist, setNowArtist] = useState('');


    // Update time every second //
    const updateTime = () => {
        // const h = new Date().getHours(); //
        const h = 16;
        const m = new Date().getMinutes();
        const s = new Date().getSeconds();

        setHour(h);
        setMinute(m);
        setSecond(s);
    }



    const updateArtis = () => {
        data.stage1.filter(el => {
            if(el.startHour === hour) {
                setNowArtist(el)
            }
        })
    }


    setInterval(() => {
        updateTime();
        updateArtis();
    }, 1000);




    return (

        <Artist name={nowArtist.name} />
        
    )

}



export default Engine;

7 months ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar empleo Planes Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.