Estoy tratando de construir una entrada de fecha por primera vez. Tengo la tarea de asegurarme de que la entrada muestre un 0 inicial si el mes o el día están configurados en un solo dígito. El problema que tengo es que cuando se ingresa un valor, no llega al siguiente controlador hasta la próxima vez que escribo en un campo. Creo que esto se debe a que estoy pasando el valor a través del estado. Pero no estoy seguro de cómo tener el estado disponible para enviarlo justo después de que el usuario escriba en el campo:
Estado:
const [date, setDate] = useState({ day: "", month: "", year: "" });Mi entrada de fecha consta de tres entradas separadas para lunes/día/año, solo mostraré el mes aquí:
<div className="nh-date"> <Input onChange={dateChange("month")} value={date.month} className={`nh-mon ${!!error && "error"}`} name="month" id="mon" maxLength={2} type="number" selectTextOnFocus={true} /> <span className="sep">/</span>Efecto de uso:
useEffect(() => { if (!!effectiveDate) { const effectiveMoment = !!effectiveDate ? moment.parseZone(effectiveDate) : {}; setCalendarDate(effectiveMoment); } if (!!startDate) { const [month, day, year] = startDate.split("/"); let shortYear = year.slice(-2); setDate({ ...date, day: day, month: month, year: shortYear }); const newDate = `${month}/${day}/${year}`; if (moment(newDate).isValid()) { debounceCallback(handleDateInputChange, newDate); setError(false); } else { setError(true); } } }, [startDate, effectiveDate]);Mi controlador onChange se ve así:
const dateChange = (field: string) => (e: any) => { // format to fit let value = e.target.value; let d = { day: "", month: "", year: "" }; if (value.length < 2) { value = "0" + value; } else { //remove extra leading 0's value = value.slice(-2); } setDate({ ...date, [field]: value }); const newDate = `${date.month}/${date.day}/20${date.year}`; setStartDate(newDate); }; Una vez que escribo en el campo debounceCallback(handleDateChange, newDate); recibe la newDate pero no como se muestra actualmente, envía el valor inicial o anterior. Todavía tengo problemas con el manejo de la entrada en el estado. No estoy seguro de cómo solucionar esto. Cualquier consejo sería útil. ¡Gracias!
en usoEfecto su fecha se actualiza y le devuelven la llamada con la nueva fecha
const dateChange = (field: string) => (e: any) => { // format to fit let value = e.target.value; let d = { day: "", month: "", year: "" }; if (value.length < 2) { value = "0" + value; } else { //remove extra leading 0's value = value - 0; } setDate((prevState) => { return { ...prevState, [field]: value }; }); } useEffect(() => { const newDate = `${date.month}/${date.day}/${date.year}`; if (moment(newDate).isValid()) { debounceCallback(handleDateChange, newDate); setError(false); } else { setError(true); } }, [date, //rest dependencies]);Llamar a setState() en React es asíncrono, por varias razones (principalmente de rendimiento). Debajo de las sábanas, React agrupará múltiples llamadas a setState() en una sola mutación de estado, y luego volverá a renderizar el componente una sola vez, en lugar de volver a renderizar para cada cambio de estado.
I think you get previous value for Month setDate({ ...date, [field]: value }); not immediately update the state. const dateChange = (field: string) => (e: any) => { // format to fit let value = e.target.value; let d = { day: "", month: "", year: "" }; if (value.length < 2) { value = "0" + value; } else { //remove extra leading 0's value = value - 0; } setDate({ ...date, [field]: value }); const newDate = `${value}/${date.day}/${date.year}`; if (moment(newDate).isValid()) { debounceCallback(handleDateChange, newDate); setError(false); } else { setError(true); } };