• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

156
Vistas
actualización de la propiedad del objeto de estado: fecha, según el valor anterior

Quiero incrementar la fecha con cada clic de botón (al día siguiente cada clic). ¿Cómo actualizar la propiedad del estado del objeto e incrementar el valor de la fecha correctamente?

 const {useState} = React; const DateComponent = () => { const [date, setDate] = useState({ currDate: new Date().toLocaleDateString(), active: true }); const nextDate = () => { setDate({ ...date, currDate: date.currDate.setDate(date.currDate.getDate() + 1) }); }; return ( <div> <span>{date.currDate}</span> <button onClick={nextDate}>Next Day</button> </div> ); } ReactDOM.createRoot( document.getElementById("root") ).render( <DateComponent /> );
 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

almost 3 years ago · Santiago Gelvez
2 Respuestas
Responde la pregunta

0

Mantenga el estado currDate como un objeto Date y conviértalo en una cadena durante la representación del componente para verlo de la siguiente manera.

Cree un objeto de fecha temporal tempDate para clonar la fecha actual y luego realice la actualización.

 const DateComponent = () => { const [date, setDate] = useState({ currDate: new Date(), active: true, }); const nextDate = () => { setDate(currentData => { const tempDate = new Date(currentData.currDate.getTime()); tempDate.setDate(currentData.currDate.getDate() + 1); return { ...currentData, currDate: tempDate, }; }); }; return ( <div> <span>{date.currDate.toLocaleDateString()}</span> <button onClick={nextDate}>Next Day</button> </div> ); };
almost 3 years ago · Santiago Gelvez Denunciar

0

La mejor manera de hacerlo es usando el objeto de vista previa para ese estado cuando usa setDate puede acceder a ese valor en la función, así es como puede usarlo

 const nextDate = () => { setDate(prev => { const newDate = new Date(prev.currDate) newDate.setDate(newDate.getDate() + 1) return { ...prev, currDate: newDate.toLocaleDateString(), }; }); };
almost 3 years ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

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

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda