ReactJS：インタラクションのない別のページの要素を生成するための関数を実行する

Question

私はこのウェブサイトを擦って、それを反応と違って投稿するものを作った。私はそれにいくつかの助けが必要です。 divは、産卵後に自分自身で浮かび上がるはずで、後でウェブサイトから新しい投稿を得るべきです。しかし、今は、Webサイトで利用可能な最初の10の記事を浮かべるだけです。今、私はonClickに基づいて機能するボタンを持っていますが、私は投稿をちょうど自分自身に出て繰り返してはいけません。

render() { 
return (
    <div> 

    {/*I have a component elsewhere*/} 
    {this.state.posts.map((post) => { 
     return (<Post post={post} key={post.id}></Post>); 
    })} 

    <div className="load-more"> 
     <a className="btn btn-primary btn-block" onClick=this.loadMore.bind(this)>Load more</a> 
    </div> 
    </div> 
); 
} 

これは私のloadMore機能です。私はそれがしかしクリックに基づいてしたくない。ただ走りたいそれは上記のものと同じコンポーネントにあります。

loadMore(){ 
    let posts = this.state.posts; 
    let lastPost = posts[posts.length - 1]; 

    $.ajax({ 
    url: this.paginationURL(), 
    data: { page: lastPost.id }, 
    type: 'GET', 
    dataType: 'json', 
    success: (response) => { 
     this.setState({ 
     posts: this.state.posts.concat(response.posts) 
     }) 
    } 
    }) 
} 

助けてくれてありがとう！より多くの情報が必要な場合は、コメント欄に記入してください。ちょっとしたアイデアがあれば、読んでいただけるリンクを残して、正しい方向を指すようにしてください。あらゆる種類の助けに感謝！

Answer 1

私はあなたの質問が正しい場合は、あなたが新しいデータを掻き分けるようにDOMを更新するためにポーリング/インターバルであなたの掻き取りメカニズムを置く必要があります。以下のような

何か：

// Lets say this is where you need to put the scraped posts 
const wherePostsShouldBe = <div id="posts"></div>; 

// Auto-run the scraping every 3 seconds. 
setInterval(scrapePosts(), 3000) 

// Do the scraping 
function scrapePosts() { 

    $.ajax({ 

    url: 'http://where-to-scrape-things.com', 
    type: 'GET', 
    dataType: 'json', 

    success: (response) => { 
     // So we scraped some data. Now update the element with these. 
     // This actually re-renders everything again including old and potentially new data. 
     // But its ok to stay primitive for now. Including simply displaying the entire data we got without serializing. 
     ReactDOM.render(
     response.posts, 
     document.getElementById('posts') 
    ); 
    } 

    }); 

} 

はこれをテストしていません。しかし、これはあなたにいくつかのアイデアを与えるはずです。