Как правильно сделать бесконечный скролл с автоматической загрузкой контента (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 запрос и ответ, всё есть, нужно понимание как добавлять данные к существующим. |
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
|
| Часовой пояс GMT +3, время: 12:15. |