I'm currently using this code inside 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>
It works fine when FetchUpdates method is called. But when I'm refreshing the items element from outside, nothing happens.
setItems([]);
Any idea would be welcomed.
Edit : I'm using UseCallback to update values from within the parent element.
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 a simple call to clear it :
if (!radioBrowser.IsLastSearch(filter, fname)) {
radioBrowser.configureSearch(filter, fname);
setItems([]);
setHasMore(true);
}
Edit 2
The full 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>
);
}
I may need the entire code structure or working example to answer this in a better way but possibly updating your useCallback can solve this.
Generally whatever variables or functions we use inside useCallback, useEffect or useMemo should be added as a dependency.
const FetchUpdates = useCallback(async() => {
let items2 = await radioBrowser.Next();
setItems([...items, ...items2]);
if (items2.length < 50) {
setHasMore(false);
} else {
setHasMore(true);
}
}, [items, radioBrowser]);I've found a workaround for my problem. Here is my solution:
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)) {
console.log('ok');
radioBrowser.configureSearch(filter, fname);
setItems([]);
items.length = 0;
items.init = 1;
setHasMore(true);
}
const FetchUpdates = useCallback(async () => {
let items2 = await radioBrowser.Next();
setItems([...items, ...items2]);
if (items2.length < 50) {
setHasMore(false);
}
else {
setHasMore(true);
}
}, [items,radioBrowser]);
return (
<div style={{ height: "700px", overflow: "auto" }}>
<InfiniteScroll
pageStart={0}
loadMore={FetchUpdates}
hasMore={hasMore || items.init != undefined}
loader={
<ReactLoading type='spin' color='#000000' />
}
useWindow={false}
>
<div key={0}>
{items.map((data) => (
<Station data={data} func={props.func} key={data.stationuuid}/>
))}
</div>
</InfiniteScroll>
</div>
);
}