loadmore не запускается с использованием response-infinite-scroller
Я использую эту библиотеку response-infinite-scroller для загрузки большего количества элементов при каждой прокрутке вниз, но по какой-то причине загрузчик больше не срабатывает для меня.
Код выглядит так:
import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import traineeship from './traineeship.api';
import Header from '../header/header.component';
import InfiniteScroll from 'react-infinite-scroller';
require('./traineeship.style.scss');
class Traineeship extends React.Component {
constructor(props) {
super(props);
this.state = {
companies: [],
page: 0,
resetResult: false,
};
}
componentDidMount() {
this.fetchCompanies(this.state.page);
}
fetchCompanies(page){
traineeship.getAll(page).then(response => {
if (response.data) {
const companies = Array.from(this.state.companies);
this.setState({ companies: companies.concat(response.data._embedded.companies) });
// this.setState({companies: this.state.companies.concat(response.data._embedded.companies)});
} else {
console.log(response);
}
});
}
render() {
return (
<div className={"wrapperDiv"}>
{JSON.stringify(this.props.rootState)}
<div className={"flexDivCol"}>
<div id="header">
<Header/>
</div>
<div id="result">
<div className={"search"}>
<h2>Harjoittelupaikkoja</h2>
<p className={"secondaryColor"}>{this.state.companies.length} paikkaa löydetty</p>
</div>
<div className={"filters"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
Hakukriteerit</h5>
<div className={"filter"}>Ravintola- ja cateringala</div>
<div className={"filter"}>Tarjoilija</div>
<div className={"filter"}>Kaikki</div>
</div>
<div className={"searchResults"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
Hakutulokset</h5>
<InfiniteScroll
pageStart={0}
loadMore={() => this.fetchCompanies}
hasMore={true || false}
loader={<div className="loader" key={0}>Loading ...</div>}
useWindow={false}
>
{
this.state.companies.map((traineeship, key) => (
<div id={"item"} key={key}>
<div className={"companyInfo"}>
<div className={"heading"}>
<div id={"companyDiv"}>
<p style={{
fontSize: '18px',
lineHeight: '18px'
}}>{traineeship.name}</p>
</div>
{
traineeship.video == null
? ''
:
<div id={"videoDiv"}>
<div className={"youtubeBox center"}>
<div id={"youtubeIcon"}>
<a className={"primaryColor"}
href={traineeship.mediaUrl}>
<span style={{marginRight: '3px'}}><Image
src="http://www.stickpng.com/assets/images/580b57fcd9996e24bc43c545.png"
style={{
width: '24px',
height: '17px'
}}/></span>
<span> <p style={{
fontSize: '13px',
lineHeight: '18px',
margin: 0,
display: 'inline-block'
}}>Esittely</p></span>
</a>
</div>
<div id={"txtVideo"}>
</div>
</div>
</div>
}
</div>
<div className={"location"}>
<div id={"locationIcon"}>
<Image src="assets/img/icLocation.png" style={{marginTop: '-7px'}}/>
</div>
<div id={"address"}>
<a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
<p className={"primaryColor"}
style={{fontSize: '13px'}}>{traineeship.city}(show in
map)</p>
</a>
</div>
</div>
<div className={"companyDescription"}>
<p className={"secondaryColor"} style={{
fontSize: '14px',
lineHeight: '20px'
}}>{traineeship.description}</p>
</div>
<div className={"companyContacts"} style={{marginTop: '20px'}}>
<p className={"contactInfo"}>URL: {traineeship.website}</p>
<p className={"contactInfo"}>Email: {traineeship.email}</p>
<p className={"contactInfo"}>Puh: {traineeship.phonenumber}</p>
<p className={"contactInfo"}>Contact: {traineeship.contact}</p>
</div>
</div>
</div>
))
}
</InfiniteScroll>
</div>
</div>
</div>
</div>
);
}
}
export default Traineeship;
Если я связываю fetchCompanies с инструктором, то он продолжает бесконечно вызывать функцию, даже если страница продолжает увеличиваться при каждом вызове, и это нормально, но проблема в том, что он продолжает бесконечно вызывать без прокрутки!
Любая идея, как я могу это исправить?
2 ответа
Всем, кто сталкивается с той же проблемой.
Это произошло потому, что вы, вероятно, проверяли пример, приведенный здесь, и поэтому, вероятно, забыли изменить
hasMoreprop from к выражению, которое разрешается в
trueили же
false.
Благодаря этому выражение
{true || false}всегда будет разрешаться в true, поэтому
InfiniteScrollКомпонент всегда будет пытаться получить данные, даже если больше нет данных для извлечения.
Что вам нужно было сделать, так это создать функцию (или использовать функцию стрелки), чтобы проверить, есть ли еще компании, которые нужно выбрать, и соответственно вернуть логическое значение.
Пожалуйста, измените свой код следующим образом:
<InfiniteScroll pageStart={0}
loadMore={this.fetchCompanies}
hasMore={true || false}
loader={<div className="loader" key={0}>Loading ...</div>}
useWindow={false}>