Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.10.2019, 09:57
Интересующийся
Отправить личное сообщение для darktowerk56c Посмотреть профиль Найти все сообщения от darktowerk56c
 
Регистрация: 08.03.2019
Сообщений: 10

Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.j
Всем привет, подскажите, пожалуйста, как реализовать следующее:
При инициализации компонента у меня происходит ajax запрос в ответе приходит массив с десятью объектами, например их 10.
И следующим образом в компоненте я рендерю данные на страницу:
return (
  <div className="book">

    <table className="highlight">
      <thead>
      <tr>
        <th>Имя</th>
        <th>Город</th>
        <th>Номер телефона</th>
        <th/>
      </tr>
      </thead>

      <tbody>
      {
        books &&
        books.map((book) => {
          return (
            <tr key={book.pbnum}>
              <td>{book.pbfirstName} {book.pblastName}</td>
              <td>{book.pbcity}</td>
              <td>{book.pbphoneNumber}</td>
              <td/>
              <td>
                <Link
                  className="waves-effect waves-light btn"
                  to={`/book/${book._id}/edit?allow=true`}
                >Редактировать</Link>
              </td>
            </tr>
          )
        })
      }
      </tbody>
    </table>
  </div>
)

Затем у меня есть функция, которая срабатывает в случае если я доскроллил до низа страница, и в этой функции я делаю снова ajax запрос, в ответе приходит следующие десять записей и так далее.
Без react.js я использовал бы:
ParentNode.append()
https://developer.mozilla.org/ru/doc...entNode/append
В общаем добавлял бы html с новыми данными в конец документа уже загруженным данным.
Как правильно реализовать ту же идею в случае с react. Т.е. оставлять уже отредеренные данные и map новые данные, которые приходят в ответе ajax, когда я доскроллил до конца документа. Как я выше описал логика скролла описана, ajax запрос и ответ, всё есть, нужно понимание как добавлять данные к существующим.
Ответить с цитированием
  #2 (permalink)  
Старый 07.10.2019, 15:56
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 422

import React from 'react'

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      data: []
    }

    this.genData = this.genData.bind(this)
  }

  genData() {
    this.setState(currentData => ({
      ...currentData,
      data: [
        ...currentData.data,
        ...Array
          .from({ length: 10 }, (_, id) =>
            ({
              id: id + this.state.data.length,
              value: Math.random() * 100
            })
          )
      ]
    }))
  }

  componentDidMount() {
    this.genData()
  }

  render() {
    return <React.Fragment>
      {this.state.data.map(({ id, value }) => <div key={id}>{value}</div>)}
      <button onClick={this.genData}>load more</button>
    </React.Fragment>
  }
}
export default App
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
try и catch подскажите как правильно сделать Jekel Javascript под браузер 9 31.03.2010 09:33
сортировка из БД. как правильно сделать? Jekel Серверные языки и технологии 2 30.03.2010 11:19
как правильно сделать переход? Blizzart Общие вопросы Javascript 1 15.02.2010 10:11
Ajax и три <form> не работает. Как правильно сделать листание записей из базы данных? vlad275 AJAX и COMET 2 14.12.2009 13:04
Как правильно послать XML в POST запросе LowCoder AJAX и COMET 10 15.07.2009 22:20