React-intersection-наблюдатель: <InView>Тег не работает, когда целевой компонент повторно отображается

Question

Я пишу код в перехватах типа «реагировать / реагировать», который пытается выполнить следующие действия.

1. Получить массив объектов из родительского компонента в качестве реквизита
2. Установить его как состояние, использующее ловушку useState.
3. Сортировка состояния в соответствии с предполагаемыми фильтрами (время и рейтинг) и повторная визуализация дочерних компонентов.
4. Использование реакции-пересечения-наблюдателя для загрузки дочернего элемента компоненты в пакетах по мере того, как пользователь прокручивает их вместо загрузки сразу, для лучшей производительности загрузки.

Для # 4 я обернул дочерние компоненты тегом и ввел параметры и функции, как предполагалось. Для начального рендера, использующего начальное состояние, # 4 работает отлично, как и предполагалось. Однако, когда фильтр применяется и дочерние компоненты перерисовываются, кажется, что наблюдатель пересечения вообще не работает.

Полагаю, причина в том, что наблюдатель интереса нужно каким-то образом «обновить», так как дочерний компонент перерисовывается, но я не знаю, как это сделать. Кто-нибудь может мне помочь?

Вот код:

import React, {useState} from 'react';
import ProfilePostspreview from './ProfilePostspreview';
import { InView } from 'react-intersection-observer';

//The below variables will be fed into InView elements for loading
let enternumber=0; 
const loadthreshold=4;

function ProfileNavigation(props){
   const [newarray, setnewarray]=useState(props.parray);   //'parray' object passed as props and saved as 'newarray' state
   const [initialload,updateload]=useState(loadthreshold);
   const otc = () => {  //Function to sort the state by time and set a new state
       let k=[...newarray];
       setnewarray(k.sort((a, b) => (a.time > b.time) ? -1 : 1 ));
       enternumber=0;
       updateload(loadthreshold);
   }
   const orc = () => {  //Function to sort the state by rating and then time and set a new state
       let k=[...newarray];
       setnewarray(k.sort((a, b) => (a.rating > b.rating) ? -1 : (a.rating === b.rating) ? ((a.time > b.time) ? -1 : 1) : 1 ));
       enternumber=0;
       updateload(loadthreshold);
   }

return (
   <div>
      <div className="sm_options">    //Component to trigger the otc and orc functions
          <div className="sm_button" id="order_t" onClick={otc}>Sort by time</div>    
          <div className="sm_button" id="order_r" onClick={orc}>Sort by rating</div>    
      </div>
      <div className="posts_preview_columns_p"> //This is dependent on the 'newarray' state but is not re-rendering even after the state is sorted and updated?
      {newarray.map(na=>
      //Below is the inline code for counting the number of intersections of the target divs and then update the load amount once it reaches the target.
      <InView as="div" onChange={function (inView, entry) { if(inView){enternumber++;} if(enternumber===initialload){updateload(initialload+loadthreshold)}}} triggerOnce={true}>
      <ProfilePostspreview
          postThumbnail={na.photolink}
          rating={na.rating}
          time={na.time}
          target={na.target}
      />
      </InView>
      )}
      </div>
   </div>
);
}

export default ProfileNavigation;

Большое спасибо заранее!