constructor principal
constructor(props) { super(props); this.state = { page: 1, articles: [], loading: false, isActive: false, }; }Usando el método componentDidMount
async componentDidMount() { const url = `https://newsapi.org/v2/top-headlines?country=us&category=${this.props.category}&apiKey=ff954e750b914328a0bc65c2e45304c4&page=1&pageSize=${this.props.pageSize}`; this.setState({ loading: true }); let data = await fetch(url); let parsedData = await data.json(data); this.setState({ articles: parsedData.articles, totalArticlesResults: parsedData.totalResults, loading: false, }); }Intentando depurar en la consola "testing", pero esta función (loadFunc) no se activa dentro de la
loadFunc = async () => { console.log('testing'); const url = `https://newsapi.org/v2/top-headlines?country=us&category=${this.props.category}&apiKey=ff954e750b914328a0bc65c2e45304c4&page=${this.state.page + 1}&pageSize=${this.props.pageSize}`; this.setState({ loading: true }); let data = await fetch(url); let parsedData = await data.json(data); this.setState({ articles: [...this.state.articles, ...this.parsedData.articles], totalArticlesResults: parsedData.totalResults, loading: false }) }Representación de jsx y mapeo a través de los elementos de la API
render() { return ( <div className="container my-3"> {/* Infinite scrolling */} <InfiniteScroll dataLength={this.state.articles.length} next={this.loadFunc} hasMore={this.state.articles.length !== this.state.totalArticlesResults} loader={<Spinner />} > contenedor dentro del componente InfiniteScroll
<div className="container"> <div className="row"> {!this.state.loading && this.state.articles.map((element, index) => {regresando en el mapeo
return ( <div className="col-md-4" key={index}> .. </div> ); })} </div> </div> </InfiniteScroll> </div> ); }Basado en documentación
children se supone por defecto que son de tipo matriz y su longitud se usa para determinar si el cargador debe mostrarse o no, si sus hijos no son una matriz, especifique esta propiedad para saber si sus elementos son 0 o más.
En su caso, solo tiene un hijo <div className="container" /> .
La solución podría ser cambiar el método de representación para representar una matriz de elementos secundarios. Y creo que la condición !this.state.loading es mala porque parpadeará y si la biblioteca depende de los niños como matriz, puede romper la funcionalidad.