React-tags: A atualização das sugestões não atualiza a lista de opções até a próxima entrada (v6)

Olá @yrik , a busca de dados não é fornecida pelo componente, mas implementada por você. Embora eu não possa depurar implementações individuais, estou feliz em oferecer alguns conselhos.

Seguindo os exemplos em # 205, sugiro buscar mais sugestões do que o necessário para exibir. Por exemplo, se você exibe atualmente 6 sugestões, tente obter 12 ou 15 do servidor. Dessa forma, o suggestionsFilter ainda deve ter alguns dados relevantes para usar até que novos sejam recebidos.

Obrigado por voltar!
É um problema um pouco diferente.
Imagine que tenho um preenchimento automático para a palavra " cerveja "

1. a lista de sugestões está vazia ( [] )
2. o usuário digita " be " -> o servidor retorna [bee, beard, beetroot, beer] (não mostramos nada porque a lista de opções não é atualizada enquanto o servidor retorna dados após a chamada de getOptions)
3. o usuário digita " abelha " -> o servidor retorna [abelha, beterraba, cerveja] que mostramos [abelha, barba, beterraba, cerveja], mostramos dados atualizados anteriormente, não os novos
4. o usuário digita " cerveja " -> o servidor retorna [cerveja], mostramos [abelha, beterraba, cerveja], mostramos dados atualizados anteriormente, não os novos

Se onInput fosse async , funcionaria. Ou se houver uma maneira de chamar const options = getOptions.call(this, query) de onInput customizado, também funcionaria.

OK, acho que entendi - então podem ser exibidas sugestões que não devem corresponder à consulta atual, correto?

Vou tentar recriar o problema com este código de exemplo

OK, acho que entendi - então podem ser exibidas sugestões que não devem corresponder à consulta atual, correto?

Exatamente! No meu caso quase sempre mostra o resultado da consulta anterior. Exceto nos casos em que a resposta é armazenada em cache no navegador e retornada instantaneamente.

Eu estava tentando recriá-lo usando jsfiddle, mas não consegui conectar a lib lá corretamente.
Se você tiver algum exemplo básico deste plugin no jsfiddle, posso estendê-lo com o exemplo de preenchimento automático do lado do servidor.

Também vale a pena notar que estou usando a v6 e o ​​exemplo que você tem parece ser da versão anterior.
"react-tag-autocomplete": "6.0.0-beta.5"

Acredito que este problema foi introduzido na v6 pelo desejo de evitar componentWillReceiveProps() devido a mudanças nas versões recentes e futuras do React. Na nova versão refatorei as sugestões para serem atualizadas apenas na montagem e onInput que não leva em conta a alteração da proposta de sugestões.

Isso pode ser resolvido usando getDerivedStateFromProps() mas acho que essa abordagem exigirá alguma otimização para evitar renderizações desnecessárias.

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

Eu gastei alguns minutos nisso e acho que encontrei uma solução adequada, a animação abaixo mostra a proposta de sugestões sendo atualizada de forma assíncrona e a lista de opções sendo atualizada sem qualquer outra entrada:

A mudança foi bastante direta, então farei mais alguns testes e levantarei um PR.

Acho que useEffect deve cobrir isso muito bem, pois pode monitorar a mudança de opções.

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

Eu liberei v6.0.0-beta.6 que deve corrigir esse problema.