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

Question

前提・実現したいこと

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>

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

Comments

[og24715]

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

Answer 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'),
);

Comments

[hello_wifi]

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

Answer 2

自分の場合、 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>
       
  )

Comments

[hello_wifi]

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