Arhn - архитектура программирования

react-infinite-scroll-component загружать больше с помощью массива

Я пытаюсь сделать бесконечную прокрутку с моими данными, которые представляют собой массив. В большинстве примеров, которые я вижу, используется вызов API, и в него включено pages, но у меня возникают проблемы с выполнением этого только с массивом и значениями, чтобы установить, сколько объектов загружается на прокрутку. Вот мой код.

import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import InfiniteScroll from 'react-infinite-scroll-component'

const Scroll = ({ tweets }) => {
  const [allTweets, setAllTweets] = useState(tweets)
  const [hasMore, setHasmore] = useState(true)
  const [lastPosition, setLastPosition] = useState(0)
  const perPage = 4

  const loadProducts = () => {
    setTimeout(() => {
      setAllTweets(...allTweets, tweets.slice(lastPosition, lastPosition + perPage))
    }, 4000)

    setLastPosition(lastPosition + perPage)
  }

  useEffect(() => {
    loadProducts()
  }, [allTweets])

  return (
    <InfiniteScroll
      dataLength={allTweets.length}
      next={loadProducts}
      hasMore={hasMore}
      endMessage={
        <p style={{ textAlign: 'center' }}>
          <b>Yay! You have seen it all</b>
        </p>
      }
      loader={<h4>Loading...</h4>}
    >
      <div className="flex flex-col">
        {allTweets &&
          allTweets.slice(lastPosition, lastPosition + perPage).map((value, index) => {
            return <div className="py-10 px-5">{value.body}</div>
          })}
      </div>
    </InfiniteScroll>
  )
}

export default Scroll
reactjs react-hooks infinite-scroll
06.11.2020

Ответы:


1

Я сделал полуфункциональный пример того, что Я думаю, вы пытаетесь сделать. Обратите внимание, что этот плагин работает только если вы можете прокручивать. Если ваш контент недостаточно высок для принудительной прокрутки, новый контент никогда не сможет загрузиться:

App.js

import React from "react";
import Scroll from "./Scroll";

const App = () => {
  const initialTweets = [
    { body: "Body 1" },
    { body: "Body 2" },
    { body: "Body 3" },
    { body: "Body 4" },
    { body: "Body 5" },
    { body: "Body 6" },
    { body: "Body 7" },
    { body: "Body 8" },
    { body: "Body 9" },
    { body: "Body 10" }
  ];

  return (
    <div>
      <h1>demo: react-infinite-scroll-component</h1>
      <hr />
      <Scroll tweets={initialTweets} />
    </div>
  );
};

export default App;

Прокрутка.jsx

import React, { useCallback, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const Scroll = ({ tweets }) => {
  const [allTweets, setAllTweets] = useState(tweets);
  const [hasMore, setHasmore] = useState(true);
  const [lastPosition, setLastPosition] = useState(0);
  const perPage = 4;

  const loadProducts = useCallback(() => {
    setTimeout(() => {
      setAllTweets((prev) => [...prev, ...prev]);
    }, 2000);

    setLastPosition(lastPosition + perPage);
  }, []);

  console.log(allTweets);

  return (
    <InfiniteScroll
      dataLength={allTweets.length}
      next={loadProducts}
      hasMore={hasMore}
      loader={<h4>Loading...</h4>}
    >
      <div className="flex flex-col">
        {allTweets.map((value, index) => (
          <div key={index} className="py-10 px-5">
            {value.body}
          </div>
        ))}
      </div>
    </InfiniteScroll>
  );
};

export default Scroll;

Вам нужно будет настроить вещи, чтобы делать именно то, что вы хотите, но это должно указать вам правильное направление.

ПРИМЕЧАНИЕ. Чтобы увидеть эту работу в codeandbox, либо сократите демонстрационное окно, чтобы вы могли прокручивать его, либо добавьте еще несколько объектов в массив initialTweets. Кроме того, есть ряд примеров, которые вы можете найти на странице проекта . домашняя страница.

06.11.2020
  • Спасибо за идею!! Я смог заставить его работать с этим const perPage = 11; const [lastPosition, setLastPosition] = useState(perPage); const [allTweets, setAllTweets] = useState(tweets.slice(0, perPage)); const [hasMore, setHasmore] = useState(true); const loadProducts = () => { setTimeout(() => { setAllTweets((prev) => [...prev, ...tweets.slice(lastPosition, lastPosition + perPage)]); }, 4000); setLastPosition(lastPosition + perPage); }; 07.11.2020
    • Новые материалы
    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..
    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..
    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..
    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..
    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..
    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..
    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..