このライブラリを使用していますhttps://www.npmjs.com/package/react-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)});
} 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を永久に呼び出し続けることです。これに対する修正はありますか?
ドキュメントには、loadmore関数の外観のサンプルはありません。
回答 2 件
「hasMore」は常に真であり、次のURLがない場合は偽にします。
関連記事
- useEffectを使用してHTTP呼び出しを行うときに無限ループに反応する
- React Native:スクロールで検索バーを非表示にしようとしています
- ネイティブスクロールをフラットリストの一番上に反応させるonChangeText
- Reactアレイの状態は、機能コンポーネントの更新時にリセットされ続けます
- React Nativeのスクロールして更新すると、ページネーションが正しく機能しません
- Reactでボタンを動的にアクティブにする
- React Hooks無限ループメモリリーク?
- ReactAdminのuseUpdateManyフックで空のプットを作成
- OJETテーブルで無限スクロールを設定するにはどうすればよいですか?
- React(Axios、React、Redux)でリクエストを行ったりデータを表示したりするときの奇妙な問題
関連した質問
- Uberはスクロール矢印付きのタイプHorizontalScrollSpyを食べます
- Webpack DevServerが遅すぎますか、それとも何か問題がありますか?
- カスタムデータベースのクエリ(Mongodb)
- React-Redux:インポート試行エラー: '/ components/Score'にデフォルトのエクスポートが含まれていません( 'Score'としてインポートされました)
- divターゲットにアクセスして、reactでリストグループアイテムのスタイルを切り替える方法は?
- React Nativeエラー失敗したプロップタイプ:タイプ `array`の無効なプロップ` children`が `Overlay`に提供されました。
- svg要素の幅と高さを制御する方法
- 別のページにあるボタンの値を呼び出すにはどうすればよいですか?
- jsonから特定のコンテンツをレンダリングする
- JavaScriptを使用したスライドショーを使用したReactJSの画像モーダル
問題、renderメソッドで関数を呼び出す
componentDidMountでの関数呼び出しと、テンプレートでthis.state printを使用した後の状態の設定