Actualmente estoy usando este código dentro de un componente funcional:
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> Funciona bien cuando se llama al método FetchUpdates . Pero cuando estoy actualizando el elemento de elementos desde el exterior, no sucede nada.
setItems([]);Cualquier idea sería bienvenida.
Editar: estoy usando UseCallback para actualizar los valores desde el elemento principal.
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]);Y una simple llamada para borrarlo:
if (!radioBrowser.IsLastSearch(filter, fname)) { radioBrowser.configureSearch(filter, fname); setItems([]); setHasMore(true); }Editar 2
La función completa:
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> ); }Es posible que necesite la estructura de código completa o el ejemplo de trabajo para responder esto de una mejor manera, pero posiblemente actualizar su useCallback puede resolver esto.
En general, cualquier variable o función que usemos dentro de useCallback, useEffect o useMemo debe agregarse como una dependencia.
const FetchUpdates = useCallback(async() => { let items2 = await radioBrowser.Next(); setItems([...items, ...items2]); if (items2.length < 50) { setHasMore(false); } else { setHasMore(true); } }, [items, radioBrowser]);He encontrado una solución para mi problema. Aquí está mi solución:
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> ); }