При инициализации компонента у меня происходит 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/docs/Web/API/Pare...
В общем, добавлял бы html с новыми данными в конец документа уже загруженным данным.
Как правильно реализовать ту же идею в случае с react. Т.е. оставлять уже отредеренные данные и map новые данные, которые приходят в ответе ajax, когда я доскроллил до конца документа. Как я выше описал логика скролла описана, ajax запрос и ответ, всё есть, нужно понимание как добавлять данные к существующим.
Средний
Сложный