React-tags: Memperbarui saran prop tidak memperbarui daftar opsi hingga input berikutnya (v6)

Hai @yrik , pengambilan data tidak disediakan oleh komponen tetapi diimplementasikan sendiri. Meskipun saya tidak dapat men-debug implementasi individual, saya dengan senang hati menawarkan beberapa saran.

Mengikuti contoh di #205, saya sarankan untuk mengambil lebih banyak saran daripada yang perlu Anda tampilkan. Misalnya jika saat ini Anda menampilkan 6 saran, coba ambil 12 atau 15 dari server. Dengan cara ini suggestionsFilter masih memiliki beberapa data yang relevan untuk digunakan sampai yang baru diterima.

Terima kasih telah kembali!
Ini masalah yang sedikit berbeda.
Bayangkan saya memiliki pelengkapan otomatis untuk kata " bir "

1. daftar saran kosong ( [] )
2. tipe pengguna " be " --> server mengembalikan [bee, jenggot, bit, bir] (kami tidak menunjukkan apa-apa karena daftar opsi tidak diperbarui karena server mengembalikan data setelah panggilan getOptions)
3. pengguna mengetik " lebah " --> server mengembalikan [lebah, bit, bir] kami menampilkan [lebah, jenggot, bit, bir], kami menampilkan data yang diperbarui sebelumnya, bukan yang baru
4. pengguna mengetik " bir " --> server mengembalikan [bir], kami menampilkan [lebah, bit, bir], kami menampilkan data yang diperbarui sebelumnya, bukan yang baru

Jika onInput akan menjadi async itu akan berhasil. Atau jika ada cara untuk memanggil const options = getOptions.call(this, query) dari custom onInput itu akan berhasil juga.

OK, saya pikir saya mengikuti - jadi saran yang ditampilkan mungkin tidak cocok dengan kueri saat ini, apakah ini benar?

Saya akan mencoba dan membuat ulang masalah dengan kode contoh ini

OK, saya pikir saya mengikuti - jadi saran yang ditampilkan mungkin tidak cocok dengan kueri saat ini, apakah ini benar?

Tepat! Dalam kasus saya itu hampir selalu menunjukkan hasil dari kueri sebelumnya. Kecuali untuk kasus ketika respons di-cache di browser dan dikembalikan secara instan.

Saya mencoba membuatnya kembali menggunakan jsfiddle tetapi tidak berhasil menghubungkan lib di sana dengan benar.
Jika Anda memiliki contoh dasar plugin ini di jsfiddle, saya dapat memperluasnya dengan contoh pelengkapan otomatis sisi server.

Juga perlu diperhatikan bahwa saya menggunakan v6 dan contoh yang Anda miliki sepertinya dari versi sebelumnya.
"react-tag-autocomplete": "6.0.0-beta.5"

Saya percaya masalah ini telah diperkenalkan ke v6 oleh keinginan untuk menghindari componentWillReceiveProps() karena perubahan dalam versi React terbaru dan yang akan datang. Dalam versi baru saya memfaktorkan ulang saran untuk diperbarui hanya di mount dan onInput yang tidak memperhitungkan perubahan prop saran.

Ini dapat diselesaikan dengan menggunakan getDerivedStateFromProps() tetapi saya pikir pendekatan ini akan memerlukan beberapa optimasi untuk mencegah render yang tidak perlu.

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

Saya telah menghabiskan beberapa menit untuk ini dan saya pikir saya telah menemukan solusi yang sesuai, animasi di bawah ini menunjukkan prop saran diperbarui secara tidak sinkron dan daftar opsi diperbarui tanpa input lain:

Perubahannya cukup mudah jadi saya akan melakukan beberapa pengujian lagi dan meningkatkan PR.

Saya kira useEffect harus mencakup ini dengan baik karena dapat memantau perubahan opsi.

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

Saya telah merilis v6.0.0-beta.6 yang seharusnya memperbaiki masalah ini.