0
252
ViewsEl valor es cambiado por setState, pero el formulario React envía el valor ORIGINAL
Tengo un problema con un valor de campo modificado que no se "pega" al formulario al enviarlo.
Estoy creando un formulario donde los usuarios pueden cargar una imagen. Después de cargar la imagen, el servicio de alojamiento devuelve la URL de la imagen, que se guarda en una variable de estado con
this.setState({ imageUrl: info.secure_url })En TextField, tengo el valor establecido como
<TextField name='imageUrl' value={this.state.imageUrl}/>Esto funciona bien y aparece en el formulario, pero surge un problema cuando se envía el formulario. El formulario no reconoce que hay algo en ese campo y arroja un error que indica que se requiere una entrada.
La función de envío funciona bien con los campos ingresados por el usuario y envía correctamente los datos a la base de datos.
Aquí está el código completo
class SubmitVaccine extends React.Component { ... state = { imageUrl: null, imageAlt: null, } uploadImage = () => { ... (code to upload image here) ... if (event === 'success') { this.setState({ imageUrl: info.secure_url } }; render() { const { imageUrl } = this.state; return ( <Grid> ... (code to upload image here) ... <TextField name='imageUrl' value={this.state.imageUrl}/> <SubmitField value='Submit' id="btn-custom"/> ... </Grid> ); } }Aquí hay algunas imágenes. Por defecto, this.state.imageUrl se establece en nulo, por lo que el campo aparece vacío
Después de cargar la imagen, la URL de la imagen aparece porque this.state.imageUrl ha cambiado
Sin embargo, el campo de texto es obligatorio y se produce un error cuando el campo está vacío al enviarlo. Esto es exactamente lo que está sucediendo aquí, ¡pero el campo está lleno! ¿Dónde debo buscar pistas sobre cómo resolver esto? 
ACTUALIZAR
ACTUALIZAR
ACTUALIZAR
Descubrí los errores del formulario porque envía el estado original, NO actualizado de imageUrl, que se configuró en nulo. nulo = campo vacío = error al enviar.
Sin embargo, podemos ver visualmente que el campo muestra una imageUrl actualizada. ¿Cómo hago que el formulario envíe la nueva imageUrl?
1 answers
Answer question0
no tenía una función onChange en su componente TextField, debe hacer una función onChange para actualizar su estado cada vez que escribe en él, así
handleChangeURL(event) { this.setState({imageURL: event.target.value}); }y ponlo
<TextField name='imageUrl' value={this.state.imageUrl} onChange={this.handleChangeURL}/> Solo asegúrese de que su componente TextField llame a la función onChange correctamente