Задать вопрос
yous
@yous
javascript

Как в React.JS сделать поочередный вывод из массива данных JSON?

class App extends React.Component {

    constructor() {
      super();
      this.state = {
        names: require("json!./data.json")
        }
    }

   render() {
   
      return (
              <div class="pagination">
                {this.state.names.map((name,i)=> <ListName key={i} data={name} />)}
              </div>
            
      );
   }
}

class ListName extends React.Component {
  render(){
    return (
     <p>{this.props.data.name}</p>
    )
  }
}


JSON файл содержит тысячи записей, как вывести с подгрузкой, например сначала выводится 10, далее при скроле ещё +10 и т.д.?
  • Вопрос задан
  • 2227 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
Вам нужно сделать API, которое будет отдавать определенное кол-во записей. Поясню: вам нужно сделать backend, так сказать. Можно написать на node.js / php / python / и т.д. Возможно, есть какой-то готовый сервис для подобных вещей, но я не искал.

Например: GET запрос на api/loadjson?limit=100&offset=0 (выдай 100, отступ 0, потом будет запрос выдай 100 - отступ 100, выдай 100 отступ 200 и тд), т.е. в теории дело обстоит так: вы загружаете первые N записей и устанавливаете обработчик на window.onscroll (пример тут), далее выбираете через какой интервал в пикселях вы планируете подгружать еще и загружаете еще N записей и так далее.

Подгрузку осуществляете с помощью xhr (или, если угодно - ajax) запросов (мне нравится isomorphic-fetch)

Из готовых компонентов, рекомендую react-virtualized. Настройка сперва выглядит трудновато, но это одна из лучших библиотек в плане документации, которую я видел. Есть все! На всякий случай - gitter чат, где есть и сам разработчик (язык EN).
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработка аддона для Xenforo v2.2.13
20 апр. 2024, в 06:06
200 руб./за проект
Привязка к Маркетплейсам 1С Розница 2.3
20 апр. 2024, в 05:26
10000 руб./за проект
Дописать функцию на Flutter, работа с yandex map kit
20 апр. 2024, в 04:18
3000 руб./за проект
Ещё заказы