Estoy usando el componente react-infinite-scroll para implementar el componente de desplazamiento infinito. La configuración del componente es:

 <div id="scrollableDiv" style={{ height: 300, overflow: "auto" }}> <InfiniteScroll dataLength={texts.length} next={getText} hasMore={true} loader={<h5>Loading...</h5>} endMessage={<p style={{textAlign:'center'}}><b>Yay! You've seen it all!</b></p>} scrollableTarget="scrollableDiv" > {<Texts texts = {texts}/>} </InfiniteScroll> </div>

donde texts es simplemente una matriz de estado de algunos objetos de texto; const [texts, setTexts] = useState([])
Este es el método getText que se llamará a next :

 const getText = async ()=>{ const res = await axios.get("http://localhost:3001/api/sth",{ params: { ids: followings.map(i => i.id), str_ids: followings.map(i => i.str_id) }, paramsSerializer: params => { return qs.stringify(params) } }); let str_ids_res = res.data.map(i => i.string_id) let texts_res = res.data.map(i => i.texts) console.log(texts_res) const filtered_res = //some processing here on texts_res /* eslint eqeqeq: 0 */ if(!arrayIsEqual(filtered_res,texts)){ console.log("Not equal") // append arrays to a array state setTexts((prevtexts) => prevtexts.concat([...filtered_res])) } }

 await axios.get("http://localhost:3001/api/sth")

siempre devuelva dos textos diferentes de DB, por lo que siempre se debe llamar a setTexts .

componente es un componente de tarjeta de IU semántica aunque.

 const Texts = ({texts}) =>{ return ( <> {texts.map(text =>( <div key={text.id}> <Card> <Card.Content> <Card.Description> {text.full_text} </Card.Description> </Card.Content> </Card> </div> ))} </> ); }

El componente InfiniteScroll solo activa Next una vez aunque mi variable de datalength de datos esté configurada correctamente.
PD. el texto está vacío inicialmente, así que cuando inicio la aplicación, solo se llama 'Cargando...'