Framework7 React - Virtual List, async loading data for items

1

Привет! Для items в VirtualList загружаю данные из БД в хуке useEffect, но при скролле VirtualList сбрасывается на items по умолчанию (у меня это пустой массив). Поиск в SearchBar тоже не выполняется. Подскажите, пжлста, что я делаю не так?

export default function VirtualListVanille() {
let items = [];
const [vlData, setVlData] = useState({
items: [],
});
useEffect(async () => {
// React advises to declare the async function directly inside useEffect
async function getData() {
let fields = “id, fullname AS title”;
let tableName = ‘contragenty’;
let sqlResults = await new SqlModel().get(fields, tableName);
return sqlResults
};
let res = await getData();
items = res;
setVlData({items: res});
}, []);

2

Hi guys, please help me figure it out why my React Virtual List can’t show received data:

Is there a way to force to call the VL renderExternal method with new items data?

3

Посмотри код в kitchen для React, там все есть

4

не понимаю, речь об этом? https://github.com/framework7io/framework7/blob/master/kitchen-sink/react/src/pages/virtual-list.jsx

5

развернул kitchen локально, все равно не понимаю как заставить VirtualList забирать данные

6

в kitchen для React в коде есть лишь пример использования данных из документации:
const items = [];
for (let i = 1; i <= 10000; i += 1) {
items.push({
title: Item ${i},
subtitle: Subtitle ${i},
});
}

может где-то есть примеры, где данные для react virtual list загружаются асинхронно?

7

в общем решил проблему с помощью useRef и методов VL appendItem, replaceAllItems и т.д.