質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

2回答

5686閲覧

Reactの無限スクロールがうまくできない。

hello_wifi

総合スコア16

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

2クリップ

投稿2019/07/08 23:19

編集2019/07/08 23:27

前提・実現したいこと

react,reduxで無限スクロールを実装したいです。
ツイッターのクローンアプリを作成していて、ツイートを最後まで表示したら、ツイートをさらに30件ずつ取得する関数を走らせたいです。
react-infinite-scroller
react-waypoint 
どちらのライブラリも試してみたのですが、うまくいきませんでした。
他のライブラリ等ございましたら、それでも構いません!

発生している問題・エラーメッセージ

一気に関数が限界まで繰り返されてしまう。
最下端まで動かしていないのに、関数が何回もトリガーされてしまう。

該当のソースコード

javascipt

1TweetsContainer.js 2 3{ this.props.tweets && this.props.tweets.map(tweet => { 4 return ( 5 <div key={tweet.tweet_id}> 6 <Tweet tweet={tweet} /> 7 </div> 8 ) 9})} 10 11{ 12this.props.tweets ? 13<Waypoint 14onEnter={this.props.getMorePosts((this.props.tweets[this.props.tweets.length -1].created_at )} 15/> 16: 17null 18}

試したこと

TweetsContainer の親コンポーネントに

javascript

1TweetsContainer の親コンポーネント 2 3<div> 4 <TweetsContainer /> 5 { 6 this.props.tweets ? 7<Waypoint 8onEnter={this.props.getMorePosts((this.props.tweets[this.props.tweets.length -1].created_at )} 9/> : 10 null 11 } 12</div>

などやってみましたが、状況変わらずでした。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

og24715

2019/07/17 06:30

実際のエラーを見せてください。 エスパーじゃないので関数と言ってもどれなのかわかりません。
guest

回答2

0

ベストアンサー

react-infinite-scroller 使わない例。

https://codepen.io/og24715/pen/RXbNqG?editors=0010

js

1function createTweets() { 2 return [...Array(30)].map((item) => ({ 3 id: faker.random.number(), 4 account: { 5 icon: faker.image.avatar(), 6 name: faker.name.findName(), 7 }, 8 text: faker.hacker.phrase(), 9 })); 10} 11 12 13const Avatar = styled.img` 14 width: ${8 * 4}px; 15 height: ${8 * 4}px; 16 border-radius: 100%; 17`; 18 19const Account = styled.div` 20 display: flex; 21 align-items: center; 22`; 23 24const Timeline = ({ tweets, threshold = 20, onReachEnd }) => { 25 const ref = React.createRef(); 26 const handleScroll = (e) => { 27 const element = e.target; 28 const { scrollHeight, scrollTop, clientHeight } = element; 29 if (scrollHeight - scrollTop - threshold < clientHeight) { 30 console.log('reach end'); 31 onReachEnd(); 32 } 33 }; 34 35 return ( 36 <div 37 onScroll={handleScroll} 38 style={{ height: '300px', overflow: 'scroll' }} 39 > 40 {tweets.map((tweet) => ( 41 <div ref={ref} key={tweet.id}> 42 <Account> 43 <Avatar src={tweet.account.icon} /> 44 <p>{tweet.account.name}</p> 45 </Account> 46 <p>{tweet.text}</p> 47 </div> 48 ))} 49 </div> 50 ); 51} 52 53const App = () => { 54 const [tweets, setTweets] = React.useState(createTweets()); 55 56 const handleReachEnd = () => { 57 setTweets(tweets.concat(createTweets())); 58 } 59 60 return ( 61 <div> 62 <h1>Hello.</h1> 63 <Timeline 64 tweets={tweets} 65 onReachEnd={handleReachEnd} 66 /> 67 </div> 68 ); 69}; 70 71ReactDOM.render( 72 <App />, 73 document.querySelector('#root'), 74);

投稿2019/07/17 06:43

og24715

総合スコア832

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hello_wifi

2019/07/19 23:19

ご指摘の通り実装したところ無事解決いたしました!ありがとうございます! ライブラリを用いて、なぜ出来なかったかの原因はまだ突き止められてませんが、わかり次第こちらに追記したいと思います。
guest

0

自分の場合、 react-infinite-scroller を使用して次のように実装できましたが、いかがでしょうか?

jsx

1 2import InfiniteScroll from 'react-infinite-scroller'; 3 4const PerPageNum = 10; 5 6... 7 8 const {tweets} = this.props; 9 const {maxCount} = this.state; 10 11 return ( 12 <InfiniteScroll 13 pageStart={0} 14 hasMore={maxCount > tweets.length} 15 loadMore={page => this.setState({maxCount: maxCount + PerPageNum})} 16 useWindow={false} 17 > 18 {tweets.map(tweet => { 19 return ( 20 <div key={tweet.tweet_id}> 21 <Tweet tweet={tweet} /> 22 </div> 23 ) 24 })} 25 </InfiniteScroll> 26 27 ) 28 29

投稿2019/07/09 11:33

編集2019/07/09 11:34
mikan3rd

総合スコア220

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hello_wifi

2019/07/13 23:34

お返事が遅くなってしまい申し訳ありません。 試してみましたが状況変わらずでした…
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問