es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La variable actualizada no se muestra.

11 Jul, 2023 Programación

Estoy utilizando React.

import React from 'react';

function Scheduler(props) {
    var remainingHours = 5;
    const TimelineHeaderItem = () => {
        remainingHours = 8;
        console.log(remainingHours) // imprime 8
        return <>;
    }
    const name = () => {
        console.log('buscando horas restantes=>', remainingHours); // imprime 5
    }

return (
   <>
    <timelineheaderitem></timelineheaderitem> 
    {name()} 

);
}
export default Scheduler;

Como puedes ver, he cambiado el valor de remainingHours a 8 en TimelineHeaderItem.
Pero cuando accedo a ese valor en la función name, entonces imprime 5, que es el valor anterior.
¿Por qué sucede esto? ¿y cómo puedo acceder al valor actualizado?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Esto se debe a que cuando se representa TimelineHeaderItem, actualiza el valor de remainingHours a 8. Sin embargo, la función name todavía hace referencia al antiguo valor de remainingHours, que era de 5 en el momento en que se definió.

    Para acceder al valor actualizado de remainingHours, puedes pasar el valor actualizado como una prop a la función name o puedes usar el estado para almacenar el valor de remainingHours y actualizarlo según sea necesario.

    Aquí hay un ejemplo de cómo usar el estado para almacenar y actualizar remainingHours:

    import React, { useState } from 'react';

function Scheduler(props) {
    const [remainingHours, setRemainingHours] = useState(5);

    const TimelineHeaderItem = () => {
        setRemainingHours(8);
        console.log(remainingHours) // imprime 8
        return <>;
    }
    const name = () => {
        console.log('obteniendo horas restantes=>', remainingHours); // imprime 8
    }

    return (
       <>
         <timelineheaderitem></timelineheaderitem> 
         {name()} 

    );
}
export default Scheduler;

    Al usar useState, ahora podemos actualizar el valor de remainingHours y acceder al valor actualizado en todo el componente.

Comments are closed.