-4

I have a series of data in one page,for example i have 100 numbers of item in one page. All 100 numbers loaded at the same time, But i want after scroll event next dates will be loaded.

class App extends React.Component {
constructor(props) {
 super(props);
 this.state = {
  data: [],
};
$.ajax({
  url:"/json.bc",
  type:"post",
  success: (result) => {
    this.setState({data: eval(result)});
  }})}
  renderInfo(){
   return this.state.data.map((item,i)=>{
    return (
     <div class="items">
      {this.renderitem(item,i)}
     </div>
  )})}

render() {
  return (
   <div>{this.renderInfo()}</div>);
  }}
ReactDOM.render(<App/>, document.getElementById('Result'));
bita
  • 255
  • 4
  • 15

1 Answers1

2

You will have to use <Scroll View /> instead of <div> tag

Saad Maqbool
  • 299
  • 2
  • 10
  • Can you explain more? – bita Nov 26 '18 at 12:39
  • ScrollView simply renders all its react child components at once. That makes it very easy to understand and use. Keep in mind that ScrollViews must have a bounded height in order to work, since they contain unbounded-height children into a bounded container (via a scroll interaction). In order to bound the height of a ScrollView, either set the height of the view directly (discouraged) or make sure all parent views have bounded height. Forgetting to transfer {flex: 1} down the view stack can lead to errors here, which the element inspector makes easy to debug. – Saad Maqbool Nov 26 '18 at 12:48
  • I try to use {this.renderitem(item,i)}, but it shows me this error : ReferenceError: "ScrollView is not defined" – bita Nov 26 '18 at 12:49