Estoy usando una aplicación MERN Stack ( "react": "^16.14.0" ) que tiene un formulario que usa DatePicker ( "react-datepicker": "^4.2.1" ) para establecer un rango de fechas. Actualmente, se está seleccionando el valor para la fecha, pero el nombre aparece como indefinido. Esto arroja un TypeError y bloquea la aplicación cuando se selecciona una fecha. ¿Cómo configuro e.target.name para startDate y endDate?
TyperError
react-dom.development.js:327 Uncaught TypeError: Cannot read properties of undefined (reading 'name') at onChange (index.js:55)formularioDatos
const [formData, setFormData] = useState({ startDate: '', endDate: '', }) const { startDate, endDate, } = formDataSelector de fechas
<DatePicker isClearable filterDate={(d) => {return new Date() > d}} placeholderText="Select Start Date" dateFormat="MMMM yyyy" selected={startDate} selectsStart startDate={startDate} endDate={endDate} onChange={(date) => onChange({ name: startDate, value: date })} />Función onChange
const onChange = (e) => { console.log(e) setFormData({ ...formData, [e.target.name]: e.target.value }) }Consola.log()
name: undefined value: Tue Aug 03 2021 00:00:00 GMT-0400 (Eastern Daylight Time)Generalmente obtenemos el nombre del campo usando event.target.name . Pero mientras usamos cualquier biblioteca de componentes en ese momento, depende de la biblioteca cómo el desarrollador de la biblioteca dio paso a obtener el nombre del campo. así que tienes que comprobar el documento de la biblioteca.
Sorprende que tengas una forma más. Solo necesita pasar el nombre del campo en la función onChange <DatePicker value={dateValue} onChange={(date) => onChange(name,date)} />
onChange=(name, date)=>{ console.log(name,date) }
La razón por la que eso sucede es que onChange no recibe ningún evento, por lo que el e.target no está definido. si echas un vistazo aquí:
// Add the name explicitly as a string, cause you're trying to update a key by its name onChange={(date) => onChange({ name: "startDate", value: date })}El onChange está recibiendo un objeto con las claves de nombre y valor. entonces la función onChange debería ser así:
const onChange = (item) => { console.log(item) // should print something like { name: "startDate", value: "the date object" } setFormData({ ...formData, [item.name]: item.value }) }