Javascript 无限滚动在React中无法正常工作
我正在为react.js使用无限滚动插件,但由于某些原因,它没有按预期的方式工作 问题是,当页面加载时,所有请求都会同时发出,而不像我每次滚动时都会发出请求 我的代码如下所示:Javascript 无限滚动在React中无法正常工作,javascript,reactjs,react-native,ecmascript-6,infinite-scroll,Javascript,Reactjs,React Native,Ecmascript 6,Infinite Scroll,我正在为react.js使用无限滚动插件,但由于某些原因,它没有按预期的方式工作 问题是,当页面加载时,所有请求都会同时发出,而不像我每次滚动时都会发出请求 我的代码如下所示: import React from 'react'; import {Route, Link} from 'react-router-dom'; import FourthView from '../fourthview/fourthview.component'; import {withRouter} from 'r
import React from 'react';
import {Route, Link} from 'react-router-dom';
import FourthView from '../fourthview/fourthview.component';
import {withRouter} from 'react-router';
import {Bootstrap, Grid, Row, Col, Button, Image, Modal, Popover} from 'react-bootstrap';
import traineeship from './company.api';
import Header from '../header/header.component';
import InfiniteScroll from 'react-infinite-scroller';
require('./company.style.scss');
class Traineeship extends React.Component {
constructor(props) {
super(props);
this.state = {
companies: [],
page: 0,
resetResult: false,
hasMore: true,
totalPages: null,
totalElements: 0,
};
}
componentDidMount() {
this.fetchCompanies(this.state.page);
}
fetchCompanies = page => {
let courseIds = '';
this.props.rootState.filterByCourseIds.map(function (course) {
courseIds = courseIds + '' + course.id + ',';
});
traineeship.getAll(page, this.props.rootState.selectedJob, courseIds.substring(0, courseIds.length - 1), this.props.rootState.selectedCity).then(response => {
if (response.data) {
const companies = Array.from(this.state.companies);
if(response.data._embedded !== undefined){
this.setState({
companies: companies.concat(response.data._embedded.companies),
totalPages: response.data.page.totalPages,
totalElements: response.data.page.totalElements,
});
}
if (page >= this.state.totalPages) {
this.setState({hasMore: false});
}
} else {
console.log(response);
}
});
};
render() {
return (
<div className={"wrapperDiv"}>
{/*{JSON.stringify(this.props.rootState)}*/}
<div className={"flexDivCol"}>
<div id="header2">
<div style={{flex: .05}}>
<img src="assets/img/icArrowBack.png" onClick={() => this.props.history.go(-1)}/>
</div>
<div style={{flex: 3}}>
<Header size="small"/>
</div>
</div>
<div id="result">
<div className={"search"}>
<h2 style={{fontSize: 22}}>Harjoittelupaikkoja</h2>
<p className={"secondaryColor LatoBold"} style={{fontSize: 13}}>{this.state.totalElements} paikkaa löydetty</p>
</div>
<div className={"filters"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
<strong>Hakukriteerit</strong></h5>
{
this.props.rootState.filters.map((filter, key) => (
<div key={key} className={"filter"}>{filter.title}</div>
))
}
</div>
<div className={"searchResults"}>
<h5 style={{marginTop: '30px', marginBottom: '10px'}} className={"primaryColor"}>
<strong>Hakutulokset</strong></h5>
<InfiniteScroll
pageStart={0}
loadMore={this.fetchCompanies}
hasMore={this.state.hasMore}
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 className={"LatoBlack"} style={{
fontSize: '18px',
lineHeight: '23px'
}}>{traineeship.name}</p>
</div>
{
traineeship.mediaUrl == 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: '24px',
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"}>
{
traineeship.addresses.map((address, key) => {
return (
<a href={"https://www.google.com/maps/search/?api=1&query=" + encodeURI("Fredrikinkatu 4, Helsinki")}>
<p key={key} className={"primaryColor"} style={{fontSize: '13px'}}>{address.street}, {address.city}</p>
</a>
)
})
}
</div>
</div>
<div className={"companyDescription"}>
<p className={"secondaryColor"} style={{
fontSize: '14px',
lineHeight: '20px'
}}>{traineeship.description}</p>
</div>
<div>
{
traineeship.images.map((image, key) => {
return (
<img id={"thumbnail"} width={"100%"}
src={image.url}
style={{
width: '80px',
height: '80px',
marginRight: '10px',
marginBottom: '10px'
}}
alt=""
key={key}
/>
)
})
}
</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 withRouter(Traineeship);
从“React”导入React;
从'react router dom'导入{Route,Link};
从“../FourthView/FourthView.component”导入第四视图;
从“react router”导入{withRouter};
从“react Bootstrap”导入{Bootstrap、Grid、Row、Col、Button、Image、Modal、Popover};
从“/company.api”导入培训课程;
从“../Header/Header.component”导入标题;
从“react infinite scroller”导入InfiniteScroll;
要求('./company.style.scss');
类实习扩展React.Component{
建造师(道具){
超级(道具);
此.state={
公司:[],
页码:0,
重置结果:false,
哈斯莫尔:没错,
totalPages:null,
元素总数:0,
};
}
componentDidMount(){
this.fetchCompanies(this.state.page);
}
fetchCompanies=page=>{
让courseIds='';
this.props.rootState.FilterByCourseId.map(函数(课程){
courseIds=courseIds+''+course.id+',';
});
getAll(第页,this.props.rootState.selectedJob,courseIds.substring(0,courseIds.length-1),this.props.rootState.selectedCity)。然后(响应=>{
if(response.data){
const companys=Array.from(this.state.companys);
if(response.data.\u embedded!==未定义){
这是我的国家({
公司:companys.concat(response.data._embedded.companys),
totalPages:response.data.page.totalPages,
totalElements:response.data.page.totalElements,
});
}
如果(页面>=此.state.totalPages){
this.setState({hasMore:false});
}
}否则{
控制台日志(响应);
}
});
};
render(){
返回(
{/*{JSON.stringify(this.props.rootState)}*/}
this.props.history.go(-1)}/>
Harjoitelupaikkoja
{this.state.totalElements}paikkaa löydetty
Hakukriterit
{
this.props.rootState.filters.map((filter,key)=>(
{filter.title}
))
}
Hakutulokset
{
this.state.companys.map((实习,钥匙)=>(
{traineeship.name}
{
traineship.mediaUrl==null
? ''
:
}
{
实习.地址.地图((地址,钥匙)=>{
返回(
)
})
}