<p>رد فعل نافذة لانهائية محمل: مرجع قائمة غير صالح</p>

هل تقوم بتمرير المرجع من خاصية العرض InfiniteLoader إلى المكوِّن FixedSizeList ؟

نعم ، هذا ما لدي حاليًا:

<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>

هل يمكنك محاولة تبديل InfiniteLoader و AutoSizer بحيث يكون لديك AutoSizer كمكون خارجي؟

كان هذا يعمل بالنسبة لي إذا كنت أتذكر بشكل صحيح.

أواجه نفس المشكلة على الرغم من أن برنامج AutoSizer هو المكون الخارجي

مرحبًا killpowa ، هل لديك مثال يمكنني إلقاء نظرة عليه؟

مرحبًا chrisneven ، هذا هو المثال - codeandbox

شكرا لك مقدما. :)

مرحبًا @ DevAKS-Yara ،

لقد ألقيت نظرة على المثال الخاص بك وأنت لا تقوم بتمرير ref من مكون InfiniteLoader إلى مكون قائمتك ( VirtualTable ) ، لذلك هذا هو السبب الرئيسي لك الحصول على هذه الرسالة invalid ref .

لقد قمت بتحرير المثال الخاص بك وقمت بتطبيق نسخة صالحة للعمل

الاستبعاد الرئيسي هنا هو أنه عندما تريد مرجعًا آخر لمكون القائمة وأيضًا استخدام مكون InfiniteLoader ، فأنت بحاجة إلى كتابة وظيفة رد الاتصال التي تحدد InfiniteLoader ref وأي مراجع أخرى تحتاجها . راجع الدالة setRefs في المكون VirtualTable .

مرحبًا @ DevAKS-Yara ،

لقد ألقيت نظرة على المثال الخاص بك وأنت لا تقوم بتمرير ref من مكون InfiniteLoader إلى مكون قائمتك ( VirtualTable ) ، لذلك هذا هو السبب الرئيسي لك الحصول على هذه الرسالة invalid ref .

لقد قمت بتحرير المثال الخاص بك وقمت بتطبيق نسخة صالحة للعمل

الاستبعاد الرئيسي هنا هو أنه عندما تريد مرجعًا آخر لمكون القائمة وأيضًا استخدام مكون InfiniteLoader ، فأنت بحاجة إلى كتابة وظيفة رد الاتصال التي تحدد InfiniteLoader ref وأي مراجع أخرى تحتاجها . راجع الدالة setRefs في المكون VirtualTable .

أوه! حاولت تمرير المرجع مباشرة من InfiniteLoader إلى VirtualTable لكن الأمر لم يسير على ما يرام. ما الفرق بين الاستخدام المباشر للمرجع الذي تم تمريره والإعداد عبر وظيفة رد الاتصال؟

راجع للشغل ، شكرا على الحل! 👍🏼 :)

راجع للشغل ، شكرا على الحل! 👍🏼 :)

على الرحب والسعة!

أوه! حاولت تمرير المرجع مباشرة من InfiniteLoader إلى VirtualTable لكن الأمر لم يسير على ما يرام. ما الفرق بين الاستخدام المباشر للمرجع الذي تم تمريره والإعداد عبر وظيفة رد الاتصال؟

حسنًا ، يمكنك أيضًا تمرير المرجع مباشرةً ولكن في هذه الحالة ، من الواضح أنك بحاجة إلى مراجع متعددة. باستخدام "مرجع رد الاتصال" ، يمكنك تعيين عدة مراجع لعقدة DOM. يفضل أن تضعه في خطاف useCallback . هذا يضمن أن مرجع رد الاتصال الخاص بنا لا يتغير بين عمليات إعادة التصيير.