En la presentación de Formulario, cargue una imagen si hay uno, luego inicie la actualización del evento -- javascript campo con react.js campo con promise camp codereview Relacionados El problema

On form submission, upload an image if there is one, then start update event


1
vote

problema

Español

¿Cuál es el comportamiento esperado?

  1. Si hay un archivo en el estado (file != null) , luego 998877766554433665544336 debe ser ejecutado, seguido de 9988777665544337 .

  2. Si no hay un archivo (file === null) , solo se debe ejecutar el startUpdateEvent(eventId, state) .

¿Cuál es el problema que encuentro en este momento?

Actualmente estoy luchando con escribir una buena pieza de código, especialmente cuando se trata de promesas condicionales. En el código a continuación, puede ver que uso un 99887766655443310 / buildResourcePath1 (anidado) Metodología que conduce a un código tremendamente largo.

  buildResourcePath2  
Original en ingles

What is the expected behavior?

  1. If there is a file in the state (file != null), then startUploadImage(file) should be executed, followed by startUpdateEvent(eventId, state).

  2. If there is no file (file === null) then only the startUpdateEvent(eventId, state) should be executed.

What is the problem I am encountering right now?

Currently I am struggling with writing a good piece of code, especially when it comes to conditional promises. In the code below you can see that I use some if / else (nested) methodology which leads to tremendously long code.

onSubmit = event => {         event.preventDefault();         if (           (this.state,           eventNameRegex.test(this.state.event_name) &&             eventDescriptionRegex.test(this.state.event_description) &&             priceRegex.test(this.state.ticket_price) &&             eventDateRegex.test(this.state.event_date))         ) {           // check if image changed or not then continue           this.props.handleLoading(true);            if (this.state.file != null) {             startUploadImage(this.state.file).then(response => {               this.setState({ event_image: response.data });               return this.props                 .startUpdateEvent(this.props.event.id, this.state)                 .then(() => {                   this.props.handleLoading(false);                   this.props.history.push("/events");                 })                 .catch(error => {                   this.props.handleLoading(false);                   this.setState({                     error: error.status,                     errorMessage: error.data                   });                 });             });           } else {             return this.props               .startUpdateEvent(this.props.event.id, this.state)               .then(() => {                 this.props.handleLoading(false);                 this.props.history.push("/events");               })               .catch(error => {                 console.log("error");                 this.props.handleLoading(false);                 this.setState({                   error: error.status,                   errorMessage: error.data                 });               });           }         } else {           this.setState({             error: 400,             errorMessage:               "Please fill in all required fields with correct data. Please try again."           });         }       }; 
        
   
   

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

No sé nada de react.js, así que por favor perdona si me perdí algo, pero en una manera de JS lo haría de esa manera:

  04  

no probado pero obtienes la esencia.

 

I know nothing of react.js, so please forgive me if I missed something, but in a JS way I'd do it that way :

onSubmit = event => {         event.preventDefault();         //start with a dedicated part for testing values         let fieldError="";         if(!eventNameRegex.test(this.state.event_name))fieldError.="Name not correct.";         if(!eventDescriptionRegex.test(this.state.event_description))fieldError.="Description not correct.";         if(!priceRegex.test(this.state.ticket_price))fieldError.="Price not correct.";         if(!eventDateRegex.test(this.state.event_date))fieldError.="Date not correct.";         if(fieldError!=""){           this.setState({             error: 400,             errorMessage:               fieldError."Please fill in all required fields with correct data. Please try again."           });           return false;         }         // check if image changed or not then continue         this.props.handleLoading(true);          if (this.state.file != null) {           startUploadImage(this.state.file).then(response => {             this.setState({ event_image: response.data });             return myUpdateEvent(this);           });         }         else return myUpdateEvent(this);       };  //when in doubt use a function ! here's hoping react.js can deal with it function myUpdateEvent(myEvent){   return myEvent.props.startUpdateEvent(myEvent.props.event.id, myEvent.state)     .then(() => {       myEvent.props.handleLoading(false);       myEvent.props.history.push("/events");     })     .catch(error => {       console.log("error");       myEvent.props.handleLoading(false);       myEvent.setState({         error: error.status,         errorMessage: error.data       });     }); } 

Not tested but you get the gist.

 
 
 
 

Relacionados problema

6  Múltiples promesas jquery  ( Multiple jquery promises ) 
Estoy empezando a reutilizar este patrón, y se preguntaba si había una forma más sucinta / clara de escribirlo. Dada una función namespace SurveyMonkeyPlay...

1  Reintentar una solicitud utilizando la biblioteca 'Solicitud' sin módulos adicionales  ( Retrying a request using request library without extra modules ) 
Estoy usando el Solicitud Módulo y quería implementar algunos reintentos por robustez. Parece excesivo usar un módulo completamente nuevo o adicional solo p...

22  Inicializador Simple Async Google Maps con angularjs  ( Simple async google maps initializer with angularjs ) 
Aquí está un simple reutilizable 9988776655544337 factory Me acompañé para inicializar los mapas de Google de forma asíncrona, lo que de alguna manera no ...

2  Bucle de reproducción de video usando la promesa de encadenamiento y resolución  ( Video playback loop using promise chaining and settimeout ) 
Bueno, esto podría parecer redundante, dado el tema de los numerosos temas sobre la interacción entre las promesas y la decepción, pero no puedo encontrar una...

1  Función del generador para enumerar archivos  ( Generator function to enumerate files ) 
Quiero implementar una función que enumera todos los archivos en el directorio. Creo que la función debe devuelve una promesa , porque se prefiere la llam...

12  Promesa: Entidades similares a la promesa de diseño de objetivos de diseño  ( Pledge promise like entities design goals experiment ) 
Fondo Estaba escribiendo una implementación de promesas / A +, solo por diversión. A mitad de camino, decidí que no era tan divertido después de todo, así q...

3  JavaScript que elimina todo dentro de una carpeta en box.com  ( Javascript that deletes everything inside a folder on box com ) 
Acabo de terminar un script simple para el nodo que eliminará todas las carpetas y archivos dentro de un ID de carpeta específico a través de la API del cuadr...

1  ¿Es esta una manera razonable de implementar promesas en Node.js?  ( Is this a reasonable way to implement promises in node js ) 
Estoy usando Passport to Setup Iniciar sesión en un sitio Express. El sitio es solo un parque infantil para que aprendas. El código interior de inicio de sesi...

6  Unidad probando un evento de clic con contenido asíncrono  ( Unit testing a click event with asynchronous content ) 
Estoy escribiendo pruebas de unidad para una aplicación web que tiene muchas interacciones de UI. Me gustaría algún comentario sobre cómo manejar, haga clic e...

9  Resultados de promesa de almacenamiento en caché / de memorización  ( Caching memoizing promise results ) 
Me pregunto cuál podría ser el mejor enfoque. Un enfoque es en cadena cachedPromise y "regular", por lo tanto, si 9988777665544335 falla, llamamos a un ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos