использование <InView> наблюдателя пересечения в реакции

Question

У меня есть список карточек, которые я получаю от Api. Карты - это продукты, которые пользователь выбирает на предыдущей вкладке. Они должны загружаться, когда пользователь прокручивает страницу вниз. Все работает нормально. Но если пользователь пролистывает до конца и обновляет страницу, появляются карточки эмоций.

Итак, у меня есть основной компонент, который берет ключи из локального хранилища (продукты, выбранные пользователем) и отправляет ключ за ключом другому компоненту. Этот компонент проверяет, видна ли карта с этим ключом, по этому ключу делает запрос в Api. Если я прокручиваю до конца и обновляю страницу, я вижу пустые карточки. Более того, в сети я вижу, что Api-запрос был сделан только к первым четырем картам. Но не до последних четырех.

Это основной компонент, отправляющий ключи другому.

const productsKeys = JSON.parse(localStorage.getItem(storageKey) ?? "[]");

      const posts = productsKeys.map((key, index) => {
  return <MyListPosts key={key} productsKey={key} index={index} />;
});

Это еще один компонент, отправляющий Api-запрос

      class MyListPosts extends Component {
  viewStateChange = (InView) => {
    if (InView) {
      //if the card is visible, the key is transfered to the async request
      this.props.productsInList(this.props.productsKey);
    }
  };
  render() {
    const { productsKey, classes, index, productsInMyList, skeletonLoading } =
      this.props;

    const products = productsInMyList[index] ?? productsInMyList;

    return (
      <InView onChange={this.viewStateChange}>
        <div>
          <Card component="nav" className={classes.myListCard}>
            {skeletonLoading ? (
              <SkeletonInList />
            ) : (
              <>
                <Typography>{products.name}</Typography>
                <Typography>{products.price} price</Typography>
                <Button onClick={() => this.deleteItem(products.key)}>
                  Done
                </Button>
              </>
            )}
          </Card>
        </div>
      </InView>
    );
  }
}