Hello good night, I was continuing tests and I observe that when I add “renderExternal” it is when it stops adding new items, I share complete code, it could be that the “List” component is not updating the new items
import React, { useState } from ‘react’;
import { Page, Navbar, List, ListItem, BlockFooter } from ‘framework7-react’;
export default (parent) => {
const [vlData, setVlData] = useState({
items: [],
});
const songs = ['Yellow Submarine', "Don't Stop Me Now", 'Billie Jean', 'Californication'];
const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
const [items, setItems] = useState([
{
title: 'Yellow Submarine',
author: 'Beatles',
cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
},
{
title: "Don't Stop Me Now",
author: 'Queen',
cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
},
{
title: 'Billie Jean',
author: 'Michael Jackson',
cover: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
},
]);
const loadMore = () => {
setTimeout(() => {
const picURL = `https://cdn.framework7.io/placeholder/abstract-88x88-${Math.floor(Math.random() * 10) + 1
}.jpg`;
const song = songs[Math.floor(Math.random() * songs.length)];
const author = authors[Math.floor(Math.random() * authors.length)];
items.push({
title: song,
author,
cover: picURL,
});
setItems([...items]);
}, 1000);
};
const setNotification = function (dataNotification) {
loadMore()
}
const module = {
'alarm': {
'tUpdate': setNotification
}
}
parent.props.Worker.workerCallBack['socketList'] = function (data) {
console.log(data);
if (data.data.message !== undefined) {
if (data.data.message.response !== undefined) {
if (data.data.message.response.data !== undefined) {
//console.log(data.data);
if (data.data.message.response.data != undefined) {
if (module[data.data.message.module] != undefined) {
if (module[data.data.message.module][data.data.message.action] != undefined)
module[data.data.message.module][data.data.message.action](data.data.message.response.data)
}
}
else
console.log("Error");
return 0;
}
}
}
}
const searchAll = (query, searchItems) => {
const found = [];
for (let i = 0; i < searchItems.length; i += 1) {
if (
searchItems[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 ||
query.trim() === ''
)
found.push(i);
}
return found; // return array with mathced indexes
};
const renderExternal = (vl, newData) => {
setVlData({ ...newData });
};
return (
<Page ptr ptrMousewheel={true} onPtrRefresh={loadMore}>
<Navbar title="Pull To Refresh"></Navbar>
<List mediaList
virtual
virtualListParams={{
items,
height: 63,
renderExternal
}}
>
{vlData.items.map((item, index) => (
<ListItem key={index} title={item.title} subtitle={item.author}>
<img slot="media" src={item.cover} width="44" />
</ListItem>
))}
<BlockFooter>
<p>
Just pull page down to let the magic happen.
<br />
Note that pull-to-refresh feature is optimised for touch and native scrolling so it
may not work on desktop browser.
</p>
</BlockFooter>
</List>
</Page>
);
};