React-tags: La actualización de la propuesta de sugerencias no actualiza la lista de opciones hasta la próxima entrada (v6)

Hola @yrik , la

Siguiendo con los ejemplos en el n. ° 205, sugeriría obtener más sugerencias de las que necesita mostrar. Por ejemplo, si actualmente muestra 6 sugerencias, intente obtener 12 o 15 del servidor. De esta manera, suggestionsFilter aún debería tener algunos datos relevantes para usar hasta que se reciban nuevos.

¡Gracias por regresar!
Es un problema un poco diferente.
Imagina que tengo un autocompletado para la palabra " cerveza ".

1. la lista de sugerencias está vacía ( [] )
2. el usuario escribe " be " -> el servidor devuelve [abeja, barba, remolacha, cerveza] (no mostramos nada porque la lista de opciones no se actualiza ya que el servidor devuelve datos después de la llamada a getOptions)
3. el usuario escribe " abeja " -> el servidor devuelve [abeja, remolacha, cerveza] mostramos [abeja, barba, remolacha, cerveza], mostramos datos previamente actualizados, no frescos
4. el usuario escribe " cerveza " -> el servidor devuelve [cerveza], mostramos [abeja, remolacha, cerveza], mostramos datos previamente actualizados, no nuevos

Si onInput fuera async , funcionaría. O si hay una forma de llamar a const options = getOptions.call(this, query) desde onInput también funcionaría.

De acuerdo, creo que lo sigo, por lo que se pueden mostrar sugerencias que no deberían coincidir con la consulta actual, ¿es correcto?

Intentaré recrear el problema con este código de ejemplo

De acuerdo, creo que lo sigo, por lo que se pueden mostrar sugerencias que no deberían coincidir con la consulta actual, ¿es correcto?

¡Exactamente! En mi caso casi siempre muestra el resultado de la consulta anterior. Excepto en los casos en que la respuesta se almacena en caché en el navegador y se devuelve al instante.

Estaba tratando de recrearlo usando jsfiddle pero no logré conectar la biblioteca allí correctamente.
Si tiene algún ejemplo básico de este complemento en jsfiddle, puedo extenderlo con un ejemplo de autocompletado del lado del servidor.

También vale la pena notar que estoy usando v6 y el ejemplo que tiene parece ser la versión anterior.
"react-tag-autocomplete": "6.0.0-beta.5"

Creo que este problema se introdujo en la v6 por el deseo de evitar componentWillReceiveProps() debido a los cambios en las versiones recientes y futuras de React. En la nueva versión, refactoricé las sugerencias para que se actualicen solo en mount y onInput que no tiene en cuenta el cambio de prop de sugerencias.

Se puede resolver usando getDerivedStateFromProps() pero creo que este enfoque requerirá cierta optimización para evitar renderizaciones innecesarias.

  static getDerivedStateFromProps (props, state) {
    const options = getOptions(props, state)
    return { options }
  }

Pasé unos minutos en esto y creo que se me ocurrió una solución adecuada, la animación a continuación muestra la propuesta de sugerencias que se actualiza de forma asincrónica y la lista de opciones se actualiza sin ninguna otra entrada:

El cambio fue bastante sencillo, así que haré más pruebas y aumentaré un PR.

Supongo que useEffect debería cubrir esto muy bien, ya que podría monitorear el cambio de opciones.

useEffect(() => {
  setOptions(getOptions(props, state))
}, [options]);

He publicado v6.0.0-beta.6 que debería solucionar este problema.