My current implementation involves utilizing this code snippet within a functional component :
return (
<div style={{ height: "700px", overflow: "auto" }}>
<InfiniteScroll
pageStart={0}
loadMore={FetchUpdates}
hasMore={hasMore}
loader={
<ReactLoading type='spin' color='#000000' />
}
useWindow={false}
>
<div key={0}>
{items.map((data) => (
<Station data={data} func={props.func} />
))}
</div>
</InfiniteScroll>
</div>
In normal situations, everything functions correctly when the FetchUpdates function is triggered. However, things do not work as intended when attempting to refresh the items element from an external source.
setItems([]);
I'm open to any suggestions or ideas for resolving this issue.
Update : I have implemented UseCallback to update values originating from the parent component.
const UpdateItemsAsync = async () => {
let items2 = await radioBrowser.Next();
setItems([...items, ...items2]);
if (items2.length < 50) {
setHasMore(false);
}
else {
setHasMore(true);
}
};
const FetchUpdates = useCallback(UpdateItemsAsync, [items]);
And here's a simple method for clearing it:
if (!radioBrowser.IsLastSearch(filter, fname)) {
radioBrowser.configureSearch(filter, fname);
setItems([]);
setHasMore(true);
}
Update 2
The complete function:
function RadioStations(props) {
const [items, setItems] = useState(new Array());
const [hasMore, setHasMore] = useState(true);
let { filter, fname } = useParams();
let radioBrowser = new RadioBrowser();
if (!radioBrowser.IsLastSearch(filter, fname)) {
radioBrowser.configureSearch(filter, fname);
setItems([]);
setHasMore(true);
}
const UpdateItemsAsync = async () => {
let items2 = await radioBrowser.Next();
setItems([...items, ...items2]);
if (items2.length < 50) {
setHasMore(false);
}
else {
setHasMore(true);
}
};
const FetchUpdates = useCallback(UpdateItemsAsync, [items,radioBrowser]);
return (
<div style={{ height: "700px", overflow: "auto" }}>
<InfiniteScroll
pageStart={0}
loadMore={FetchUpdates}
hasMore={hasMore}
loader={
<ReactLoading type='spin' color='#000000' />
}
useWindow={false}
>
<div key={0}>
{items.map((data) => (
<Station data={data} func={props.func} />
))}
</div>
</InfiniteScroll>
</div>
);
}