Как выводить больше данных с api при нажатии на кнопку?

Question

[Snooom]

Хочу реализовать кнопку показать еще. Данные берутся с api ограниченное 10 блоками данных

import '../css/App.css';
import Dobavlenie from './Dobavlenie';
import apart from '../media/img/28_thumbnail.jpg'
import price from '../media/icons/price-tag-svgrepo-com (1).svg'
import data from '../media/icons/date-remove-svgrepo-com.svg'
import edit from "../media/icons/edit-2-svgrepo-com.svg"
import Footer from './Footer';
import axios from 'axios'
import { useEffect, useState } from 'react';
function GlavnayContainer() {
  const [product, setProduct] = useState([]);
useEffect(() => {
  axios.get('https://fakestoreapi.com/products?limit=8').then((response) => {
    setProduct(response.data)
debugger
})
},[])


  return (
    <>
    {/* Секция добавления  */}
  
     {/* Главная секция Hero */}
    <section className='hero-section'>
        <div className='form'>
          <form>
            <div>
            <input placeholder='Введите товар'  className='input-form' type="text" />
            <select >
            <option selected disabled>Категория</option>
              <option value="1">Машины</option>
              <option value="2">Недвижимость</option>
              <option value="3">Одежда</option>
            </select>
            <select  >
            <option selected disabled>Выберите Регион</option>
              <option value="1">Ростовская область</option>
              <option value="2">Алтайский край</option>
              <option value="3">Краснодарский край</option>
            </select>
            <select  >
            <option selected disabled>Выберите Город</option>
              <option value="1">Ростов</option>
              <option value="2">Краснодар</option>
              <option value="3">Таганрог</option>
            </select>
            <div className='button'> <button>Поиск</button></div>
            </div>
        
          </form>
        </div>
        <div className='hero-section__text'>
         <h1>FastSale Объявления</h1>
         <p className='fds'>ЛЕГКО КУПИТЬ, ЛЕГКО ПРОДАТЬ</p>
         <button className='block-dobavlenie'>
    <img src={edit} alt="edit" />
    <p>Добавить объявление</p>
</button>
        </div>
    </section>
 {/* Секция карточек  */}
    <section className='section-cards'>
      <h3 className='section-cards_title'>Рекомендации для вас</h3>
      <div className='cards'>
{
  product.map((p) => {
    return(
      <div className='card'>
      <div>
      <div className='card_img'>
      <img  src={p.image} alt="apart" />
      </div> 
      <div className='card_title'>
      <h2>{p.title}</h2>
      </div>
   <div className='card_cost'>
<img src={price} alt="price" />
<p>{p.price} $</p>
   </div>
   <div className='card_data'>
    <img src={data} alt="data" />
    <p>Июнь 1, 2024</p>
   </div>
    </div>
    </div>
    )
  })
}
       

     
        
       

      </div>
      <button className='section-cards_button'>Больше объявлений</button>
    </section>
 {/* Секция подвал */}

    </>

  );
}

export default GlavnayContainer;

Как это сделать с помощью React?

Comments

[Kentavr16]

Делаешь кнопку которая будет вызывать обращаться в сеть за новой порцией данных. что не выходит? В апи должен быть параметр "page" или вроде того, который подгружает нужную страницу. Тыц по кнопке = обращение к АПИ за новой страницей, установка нового стейта. Только в мап еще нужно key определить, чтобы правильно отрисовывалисо компоненты.

[Kentavr16]

Советую обратиться к документации и обучалкам по реакту. Несмотря на то что это небольшая библиотека и писать можно вроде бы как хочется, будет полезно ознакомиться с базовыми концепциями реакта. Вся его сила в простом разбиении на компоненты, а ты пока все в 1 простыню пишешь.

[Snooom]

Kentavr16, в данном api нету такого метода

[Kentavr16]

Snooom, нет, если почитать документацию то можно увидеть что такой метод есть. Но от этого не легче - он тупо не работает, как и лимитация работает через раз и коряво. Советую отправиться сюда и работать с нормальным фейковым апи.

Answer 1

[kflipper]

В данном случае api не поддерживает пагинацию. Тебе стоит хранить количество отображенных постов в стейте, а при нажатии на кнопку "показать больше" увеличивать это количество. Как-то так:

const [product, setProduct] = useState([]);
const [productsCount, setProductsCount] = useState(8);

useEffect(() => {
	axios.get(`https://fakestoreapi.com/products?limit=${productsCount}`).then((response) => {
	  setProduct(response.data)
	}
}, [productsCount])

const viewMoreHandle = () => {
	setProductsCount(prev => prev+5)
}