Cuando el usuario hace clic en un botón, quiero que la aplicación
El problema que veo es que bajar todas las filas no incluye la que se acaba de publicar a menos que incluya un retraso manual (a través de setTimeout).
Así es como se ven mis 2 funciones
// gets all data, updates state, thus triggering react to rerender listWords() { setTimeout(() => fetch("http://localhost:9000/listWords") .then(res => res.text()) .then(res => this.setState({ wordList: JSON.parse(res)})), 2000) } // sends new word to the MySQL database, then kicks off the listWords process to refetch all data addWord() { fetch("http://localhost:9000/addWord", { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ word: this.state.newWord }) }) .then(res => res.json()) .then(this.listWords()) }No debería tener que tener ese setTimeout allí, pero cuando lo elimino, la actualización de listWords no tiene la fila recién publicada.
Mi mejor conjetura es que tampoco
.then() , o¿Cómo puedo asegurarme de que la POST se haya completado con éxito antes de volver a extraer las filas?
Estoy usando reaccionar, expresar, secuenciar, y para la base de datos es MySQL en un contenedor acoplable.
De hecho, cometiste un error, una trampa común en la que yo también caí varias veces :)
Al llamar a addWord() , evaluará then(this.listWords()) . Esto llamará inmediatamente a listWords() .
En su lugar, pasa una función a then(...) (en lugar de llamar a una función), por ejemplo, así:
.then(() => this.listWords())o incluso así:
.then(this.listWords) Ahora, en lugar de pasar el resultado de listWords() a then() , pasará una función que llamará a listWords() a then() , por lo que solo ejecutará listWords() cuando la Promesa alcance este then()
Ejemplo para hacer este comportamiento aún más claro:
Al llamar a una función function foo(arg1) {} , JS necesita saber el valor de arg1 antes de llamar a foo . Tomemos el siguiente fragmento de código:
foo(bar()) En este caso, se debe llamar a bar() antes que a foo(...) porque arg1 será el valor devuelto por bar() . En contraste con el siguiente caso:
foo(() => bar()) Ahora, arg1 será una función en lugar del valor devuelto por bar() . Esto es equivalente a:
var arg = () => bar(); foo(arg);En contraste con:
var arg = bar(); foo(arg);Donde es obvio lo que va a pasar.
En funciones encadenadas como foo(arg1).bar(arg2).baz(arg3) , todos los argumentos se evaluarán antes de llamar a foo(...) .
Alguna ayuda para depurar tales problemas: Use el Inspector de red en su navegador. Mostrará el orden de las solicitudes realizadas y, en este ejemplo, habrá visto que la solicitud GET se realizó antes que la solicitud POST . Es posible que esto no explique por qué sucede, pero puede comprender el problema más rápido.