Как я могу правильно реализовать load more в react.js?

@dayna 

"Load more" - это частая функция в многих веб-приложениях и она может быть реализована в React.js разными способами. Однако, есть несколько основных подходов.

Один из наиболее распространенных подходов состоит в том, чтобы иметь компонент, который хранит список элементов, и компонент, который отображает кнопку "Load more". Кнопка "Load more" при нажатии вызывает функцию, которая загружает дополнительные элементы в список и увеличивает количество отображаемых элементов на странице.

Вот пример реализации "Load more" с использованием useState и useEffect хуков React:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

import React, { useState, useEffect } from "react";

function LoadMoreExample() {
  const [items, setItems] = useState([]);
  const [visibleItems, setVisibleItems] = useState(10);

  useEffect(() => {
    // загрузка данных
    fetch("https://jsonplaceholder.typicode.com/photos")
      .then((response) => response.json())
      .then((data) => setItems(data));
  }, []);

  const loadMore = () => {
    setVisibleItems(visibleItems + 10);
  };

  return (
    <div>
      {items.slice(0, visibleItems).map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
      {visibleItems < items.length && (
        <button onClick={loadMore}>Load more</button>
      )}
    </div>
  );
}

В этом примере мы используем хук useState для хранения списка элементов и количества отображаемых элементов. Мы загружаем данные с помощью useEffect хука и сохраняем их в состоянии элементов. Когда пользователь нажимает кнопку "Load more", мы увеличиваем значение visibleItems на 10, чтобы отобразить следующие 10 элементов. Мы также проверяем, есть ли еще элементы для отображения, и показываем кнопку "Load more", только если есть больше элементов.

Это только один из многих способов реализации "Load more" в React.js, но он может быть полезен для начала работы.