<p>react-window-infinite-loader: Referensi daftar tidak valid</p>

Apakah Anda meneruskan referensi dari InfiniteLoader render prop ke komponen FixedSizeList ?

Ya inilah yang saya miliki saat ini:

<InfiniteLoader
  isItemLoaded={index => index < items.length}
  itemCount={1000}
  threshold={20}
  loadMoreItems={loadMoreItems}
  ref={infiniteLoaderRef}
>
  {({ onItemsRendered, ref }) => (
    <AutoSizer style={{ minHeight: "800px" }}>
      {({ height, width }) => (
        <VariableSizeGrid
          columnWidth={_index => width / numberOfColumns}
          columnCount={numberOfColumns}
          rowCount={Math.ceil(items.length / numberOfColumns)}
          rowHeight={_index => heightOfRow}
          height={height}
          width={width}
          ref={ref}
        >
          {props => <GridItem {...props} />}
        </VariableSizeGrid>
      )}
    </AutoSizer>
  )}
</InfiniteLoader>

Bisakah Anda mencoba menukar InfiniteLoader dan AutoSizer sehingga Anda memiliki AutoSizer sebagai komponen luar?

Itu berhasil untuk saya jika saya ingat dengan benar.

Saya mengalami masalah yang sama meskipun saya memiliki AutoSizer sebagai komponen luar

Hai @killpowa , apakah Anda punya contoh yang bisa saya lihat?

Hai @chrisneven , Ini contohnya - codeandbox

Terima kasih sebelumnya. :)

Hai @DevAKS-Yara,

Saya telah melihat contoh Anda dan Anda tidak meneruskan ref dari komponen InfiniteLoader ke komponen daftar Anda ( VirtualTable ), jadi itulah alasan utama Anda dapatkan pesan invalid ref .

Saya telah mengedit contoh Anda dan menerapkan versi yang berfungsi

Pengambilan utama di sini adalah ketika Anda ingin referensi lain ke komponen daftar dan juga menggunakan komponen InfiniteLoader , Anda perlu menulis fungsi panggilan balik yang menyetel ref InfiniteLoader dan referensi lain apa pun yang Anda butuhkan . Lihat fungsi setRefs di komponen VirtualTable .

Hai @DevAKS-Yara,

Saya telah melihat contoh Anda dan Anda tidak meneruskan ref dari komponen InfiniteLoader ke komponen daftar Anda ( VirtualTable ), jadi itulah alasan utama Anda dapatkan pesan invalid ref .

Saya telah mengedit contoh Anda dan menerapkan versi yang berfungsi

Pengambilan utama di sini adalah ketika Anda ingin referensi lain ke komponen daftar dan juga menggunakan komponen InfiniteLoader , Anda perlu menulis fungsi panggilan balik yang menyetel ref InfiniteLoader dan referensi lain apa pun yang Anda butuhkan . Lihat fungsi setRefs di komponen VirtualTable .

Oh! Saya mencoba meneruskan ref langsung dari InfiniteLoader ke VirtualTable tetapi tidak berjalan dengan baik. Apa perbedaan antara langsung menggunakan referensi yang diteruskan dan mengatur melalui fungsi panggilan balik?

BTW, terima kasih atas solusinya! 👍🏼 :)

BTW, terima kasih atas solusinya! 👍🏼 :)

Terima kasih kembali!

Oh! Saya mencoba meneruskan ref langsung dari InfiniteLoader ke VirtualTable tetapi tidak berjalan dengan baik. Apa perbedaan antara langsung menggunakan referensi yang diteruskan dan mengatur melalui fungsi panggilan balik?

Yah, Anda juga bisa langsung memberikan referensi tetapi dalam hal ini Anda tampaknya perlu memiliki banyak referensi. Dengan menggunakan "ref panggilan balik" Anda dapat menetapkan beberapa referensi ke simpul DOM. Sebaiknya Anda memasukkannya ke dalam kait useCallback . Ini memastikan bahwa referensi panggilan balik kami tidak berubah di antara rendering ulang.