React-tags: La mise à jour des suggestions prop ne met pas à jour la liste des options jusqu'à la prochaine entrée (v6)

Salut @yrik , la récupération de données n'est pas fournie par le composant mais implémentée par vous-même. Bien que je ne puisse pas déboguer des implémentations individuelles, je suis heureux d'offrir quelques conseils.

Suite aux exemples de #205, je suggérerais d'aller chercher plus de suggestions que vous n'en avez besoin pour en afficher. Par exemple, si vous affichez actuellement 6 suggestions, essayez d'en récupérer 12 ou 15 sur le serveur. De cette façon, le suggestionsFilter devrait toujours avoir des données pertinentes à utiliser jusqu'à ce que de nouvelles soient reçues.

Merci pour votre retour !
C'est un problème un peu différent.
Imaginez que j'ai une saisie semi-automatique pour le mot " bière "

1. la liste de suggestions est vide ( [] )
2. l'utilisateur tape " be " --> le serveur renvoie [abeille, barbe, betterave, bière] (nous n'affichons rien car la liste d'options n'est pas mise à jour car le serveur renvoie des données après l'appel getOptions)
3. l'utilisateur tape " abeille " --> le serveur renvoie [abeille, betterave, bière] nous montrons [abeille, barbe, betterave, bière], nous montrons les données précédemment mises à jour, pas les nouvelles
4. l'utilisateur tape " bière " --> le serveur renvoie [bière], nous montrons [abeille, betterave, bière], nous montrons les données précédemment mises à jour, pas les nouvelles

Si onInput était async cela fonctionnerait. Ou s'il existe un moyen d'appeler const options = getOptions.call(this, query) partir de onInput cela fonctionnerait aussi.

D'accord, je pense avoir suivi - des suggestions peuvent donc s'afficher qui ne devraient pas correspondre à la requête actuelle, est-ce correct ?

Je vais essayer de recréer le problème avec cet exemple de code

D'accord, je pense avoir suivi - des suggestions peuvent donc s'afficher qui ne devraient pas correspondre à la requête actuelle, est-ce correct ?

Exactement! Dans mon cas, il affiche presque toujours le résultat de la requête précédente. Sauf dans les cas où la réponse est mise en cache dans le navigateur et renvoyée instantanément.

J'essayais de le recréer à l'aide de jsfiddle mais je n'ai pas réussi à y connecter correctement la bibliothèque.
Si vous avez un exemple de base de ce plugin dans jsfiddle, je peux l'étendre avec un exemple de saisie semi-automatique côté serveur.

Il convient également de noter que j'utilise la version 6 et que l'exemple que vous avez semble être une version précédente.
"react-tag-autocomplete": "6.0.0-beta.5"

Je crois que ce problème a été introduit dans la v6 par le désir d'éviter componentWillReceiveProps() raison des modifications apportées aux versions récentes et à venir de React. Dans la nouvelle version, j'ai remanié les suggestions pour qu'elles soient mises à jour uniquement sur le montage et sur onInput ce qui ne tient pas compte du changement de prop suggestions.

Il peut être résolu en utilisant getDerivedStateFromProps() mais je pense que cette approche nécessitera une certaine optimisation pour éviter les rendus inutiles.

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

J'ai passé quelques minutes là-dessus et je pense avoir trouvé une solution appropriée, l'animation ci-dessous montre que les suggestions sont mises à jour de manière asynchrone et que la liste des options est mise à jour sans aucune autre entrée :

Le changement a été assez simple, je vais donc faire d'autres tests et créer un PR.

Je suppose que useEffect devrait bien couvrir cela car il pourrait surveiller le changement d'options.

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

J'ai publié v6.0.0-beta.6 qui devrait résoudre ce problème.