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

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

質問する

ただいまの
回答率

88.32%

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

解決済

回答 2

投稿 ・編集

  • 評価
  • クリップ 2
  • VIEW 2,669
hello_wifi

hello_wifi

score 16

前提・実現したいこと

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

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

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

該当のソースコード

TweetsContainer.js

{ this.props.tweets && this.props.tweets.map(tweet => {
      return (
        <div key={tweet.tweet_id}>
         <Tweet tweet={tweet} />
        </div>
      )
})}   

{
this.props.tweets ?
<Waypoint 
onEnter={this.props.getMorePosts((this.props.tweets[this.props.tweets.length -1].created_at )} 
/>
:
null
}

試したこと

TweetsContainer　の親コンポーネントに 

TweetsContainer　の親コンポーネント

<div>
 <TweetsContainer />
 {
 this.props.tweets ?
<Waypoint 
onEnter={this.props.getMorePosts((this.props.tweets[this.props.tweets.length -1].created_at )} 
/> :
 null
 }
</div>


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

more_vert1 件の質問への追記・修正依頼

質問への追記・修正、ベストアンサー選択の依頼

  • og24715

    og24715

    2019/07/17 15:30

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

    キャンセル

回答 2 件

link

checkベストアンサー

+1

react-infinite-scroller 使わない例。

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

function createTweets() {
  return [...Array(30)].map((item) => ({
    id: faker.random.number(),
    account: {
      icon: faker.image.avatar(),
      name: faker.name.findName(),
    },
    text: faker.hacker.phrase(),
  }));
}


const Avatar = styled.img`
  width: ${8 * 4}px;
  height: ${8 * 4}px;
  border-radius: 100%;
`;

const Account = styled.div`
  display: flex;
  align-items: center;
`;

const Timeline = ({ tweets, threshold = 20, onReachEnd }) => {
  const ref = React.createRef();
  const handleScroll = (e) => {
    const element = e.target;
    const { scrollHeight, scrollTop, clientHeight } = element;
    if (scrollHeight - scrollTop - threshold < clientHeight) {
      console.log('reach end');
      onReachEnd();
    }
  };

  return (
    <div
      onScroll={handleScroll}
      style={{ height: '300px', overflow: 'scroll' }}
    >
      {tweets.map((tweet) => (
        <div ref={ref} key={tweet.id}>
          <Account>
            <Avatar src={tweet.account.icon} />
            <p>{tweet.account.name}</p>
          </Account>
          <p>{tweet.text}</p>
        </div>
      ))}
    </div>
  );
}

const App = () => {
  const [tweets, setTweets] = React.useState(createTweets());

  const handleReachEnd = () => {
    setTweets(tweets.concat(createTweets()));
  }

  return (
    <div>
      <h1>Hello.</h1>
      <Timeline
        tweets={tweets}
        onReachEnd={handleReachEnd}
        />
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.querySelector('#root'),
);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/20 08:19

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

    キャンセル

link

0

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

import InfiniteScroll from 'react-infinite-scroller';

const PerPageNum = 10;

...

  const {tweets} = this.props;
  const {maxCount} = this.state;

  return (
    <InfiniteScroll
      pageStart={0}
      hasMore={maxCount > tweets.length}
      loadMore={page => this.setState({maxCount: maxCount + PerPageNum})}
      useWindow={false}
    >
      {tweets.map(tweet => {
        return (
          <div key={tweet.tweet_id}>
            <Tweet tweet={tweet} />
          </div>
        )
      })}   
    </InfiniteScroll>

  )

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/14 08:34

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

    キャンセル

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

  • ただいまの回答率 88.32%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る