React-window: Masalah aneh dengan tinggi dan atas

Dibuat pada 3 Jul 2019 · 3Komentar · Sumber: bvaughn/react-window

Ringkasan

Saya memiliki proyek sumber tertutup yang sedang saya kerjakan, dan menemukan masalah hari ini di mana saya menggunakan react-window untuk daftar besar item yang difilter melalui input. Ketika saya memfilter daftar, terkadang saya melihat masalah dengan cara daftar ditampilkan. Kadang-kadang saya akan melihat ketinggian yang salah digunakan untuk komponen tertentu.

Jika saya memaksa ketinggian menjadi ketinggian yang saya inginkan (dengan memperluas gaya) maka offset atas akan salah, menciptakan tumpang tindih item atau celah saya tergantung pada kasusnya. Saya menemukan perilaku yang sama persis ini terjadi dalam proyek yang saya kerjakan, dan seperti demo di bawah ini tampaknya hanya terjadi "kadang-kadang". Karena ini terjadi sebagai reaksi terhadap pemfilteran, saya akan berasumsi bahwa itu terkait.

Sekarang saya bisa menggunakan ini dengan cara yang tidak disengaja, atau mungkin saya melakukan sesuatu yang konyol dan tidak bisa meletakkan jempol saya di atasnya dengan tepat. Tapi saya pikir ini adalah kasus penggunaan yang populer dan orang-orang di sini mungkin tahu bagaimana melakukan yang terbaik. Jika ini adalah masalah yang ada, atau Anda pikir saya harus menanyakannya di tempat lain, beri tahu saya, terima kasih.

Demo

Untuk mereplikasi masalah yang saya lihat, saya memutuskan untuk mencoba membuat sedikit demo tentang Itu. Klik di sini untuk melihat aplikasi demo. Jika Anda ingin melihat masalah dengan top Anda hanya perlu mengganti atribut style dan memaksa ketinggian menjadi ROW_HEIGHT atau GROUP_HEADER_HEIGHT .

Langkah

Kunjungi demo
Tekan tombol Remove Bananas
Lihat judul yang diperbesar untuk 'Apel'

Catatan

Mereka adalah cara lain untuk menyebabkan masalah dengan mengklik berbagai tombol, tetapi saya menemukan itu sebagai cara termudah/dapat diandalkan untuk melakukannya.
Menyembunyikan dan Menampilkan daftar tampaknya memperbaiki masalah.

Browser yang Diuji

Firefox Versi 67.0.4 (64-bit)
Chrome Versi 75.0.3770.100 (Builan Resmi) (64-bit)

💬 question

Sumber

vinnymac

Semua 3 komentar

Lihat dokumen:
https://react-window.now.sh/#/api/VariableSizeList

resetAfterIndex(index: number, shouldForceUpdate: boolean = true): void
VariableSizeList menyimpan offset dan pengukuran untuk setiap indeks untuk tujuan kinerja. Metode ini menghapus data yang di-cache untuk semua item setelah (dan termasuk) indeks yang ditentukan. Itu harus dipanggil setiap kali ukuran item berubah. (Perhatikan bahwa ini bukan kejadian biasa.)
Secara default, daftar akan dirender secara otomatis setelah indeks direset. Jika Anda ingin menunda rendering ulang ini hingga misalnya, pembaruan status telah selesai di komponen induk, tentukan nilai salah untuk parameter opsional kedua.

Sepertinya Anda tidak memanggil metode itu untuk memberi tahu bahwa salah satu ukuran cache Anda telah berubah.

Kedengarannya seperti duplikat #273, #199, #147, #57

bvaughn pada 3 Jul 2019

👍1

@bvaughn terima kasih atas bantuannya, saya sangat menghargainya. Mencari masalah untuk masalah ini, sayangnya, saya tidak menemukan semua ini.

Mungkin menguntungkan (untuk kewarasan Anda) jika kami memperbarui dokumen untuk membuat kasus ini lebih menonjol, mungkin sebagai semacam peringatan? Dokumen memulai dengan membenarkan mengapa metode itu ada, alih-alih memberikan kasus penggunaan untuk apa seseorang akan menggunakannya.

Memulainya dengan sesuatu seperti This method should be called whenever the source items change. dapat membantu. Apa pun untuk menghindari spamming Anda lebih banyak di masa depan jika saya dapat membantu 👍

vinnymac pada 3 Jul 2019

Tentu tidak masalah.

Pada Wed, 3 Jul, 2019 4:34 Vincent Taverna [email protected]
menulis:

@bvaughn https://github.com/bvaughn terima kasih atas bantuannya, saya
sangat menghargainya. Mencari masalah untuk masalah ini saya tidak berakhir
datang di semua ini sayangnya.
Mungkin menguntungkan (untuk kewarasan Anda) jika kami memperbarui dokumen untuk membuat
kasus ini lebih menonjol, mungkin sebagai semacam peringatan? Dokumen dimulai
pergi dengan membenarkan mengapa metode itu ada, alih-alih memberikan kasus penggunaan untuk
untuk apa seseorang akan menggunakannya.
Memulainya dengan sesuatu seperti Metode ini harus dipanggil
setiap kali item sumber berubah. bisa membantu. Apa saja untuk menghindari spamming
Anda lebih banyak di masa depan jika saya dapat membantu 👍
—
Anda menerima ini karena Anda disebutkan.
Balas email ini secara langsung, lihat di GitHub
https://github.com/bvaughn/react-window/issues/280?email_source=notifications&email_token=AAAHHHKEU5Z2UVRSOMCN5L3P5UEMFA5CNFSM4H5HW4P2YY3PNVWWK3TUL52HS4DFVREXG43VMXVBW63DNFTYA
atau matikan utasnya
https://github.com/notifications/unsubscribe-auth/AAAHHHK5ZANLKNLER475T33P5UEMFANCNFSM4H5HW4PQ
.