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

Question

[Yuriy]

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 и т.д.?

Answer 1

[Максим]

Вам нужно сделать 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).

Comments

[Yuriy]

у меня статичный файл json...

[Максим]

yous: импортируйте записи в базу.. ту же mongodb, например.

[Yuriy]

Максим: а в .map() можно как-то ограничивать вывод или начальную итерацию делать не с 0 элемента? ну например как в for

[Максим]

yous: нет. Плюс таким образом вы не решаете вопрос "подгрузки", так как у вас уже будет весь json файл загружен.

[abberati]

yous: перед тем, как выполнять map, можно обрезать массив методом Array.prototype.slice. И, как написал Максим, "устанавливаете обработчик на window.onscroll (пример тут), далее выбираете через какой интервал в пикселях вы планируете подгружать еще и загружаете еще N записей и так далее". Только вместо "загружаете N записей", отрезаете от массива нужный кусок.

Но всё это странненько... Получать тысячи записей из статичного файла для того, чтобы отобразить первые десять - очень плохое решение. Нужен бэкенд.