Проблемы при отображении записей из базы данных с использованием React Redux

Question

Вот уже около 7 часов, я работаю с бесконечной прокруткой, используя реагировать на редукцию .

Этот код очень хорошо работает, отображая 20 записей базы данных в качестве пользовательской прокрутки-вниз по странице.Но в настоящее время я сталкиваюсь с двумя проблемами:

1.) Я не могу заставить приложение отображать сообщение " Больше нет записей ", как только запись закончится отображением из базы данных.Я пытался

get finished() {
console.log(this.props.users_scroll.length);
  if (this.row >= this.props.users_scroll.length ) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

, но консоль дает значения undefined для этой строки кода

console.log(this.props.users_scroll.length);

Я также пытался

get finished() {

console.log(this.loadMore.length);

 if (this.row >= this.loadMore.length ) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

но консоль выдает значения 0 для этой строки кода console.log(this.loadMore.length);, в результате приложение немедленно покажет Больше записей , тогда как в базе данных по-прежнему около 15 записей.

2.) Когда отображаются все 20 записей из базы данных, все еще продолжается непрерывный вызов с сервера / базы данных, пока пользователь продолжает прокручивать страницу вниз.Я пробовал это, но это не останавливает ненужные вызовы сервера / базы данных.кажется, что this.users_scroll является либо пустым , либо неопределенным

 if(this.users_scroll !='' ){

loadMore();
}

Вот код

import React, { Component, Fragment } from "react";
import { render } from "react-dom";
import request from "superagent";

import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';


class InfinitescrollPage extends React.Component {

  constructor(props) {
    super(props);

    // Sets up our initial state
    this.state = {
    users_scroll: [],

    };

//set parameters

this.row = 0;
this.rowperpage = 5;
this.cText = "";
this.loadMore = this.loadMore.bind(this);

    // Binds our scroll event handler
    window.onscroll = () => {
      const {

         loadMore,
        state: {
        },
      } = this;

      // Checks that the page has scrolled to the bottom
      if (
        window.innerHeight + document.documentElement.scrollTop
        === document.documentElement.offsetHeight
      ) {

 //if(this.users_scroll !='' ){

loadMore();
//}
      }
    };
  }

  componentWillMount() {
    // Loads some users on initial load
this.props.dispatch(userActions.getAll_Infinitescroll(this.row));

  }



loadMore() {
 this.cText = "content is Loading ...";
this.row+=this.rowperpage;

setTimeout(()=>{
this.len =this.props.dispatch(userActions.getAll_Infinitescroll(this.row));

this.cText = "";

},100); 

}





get finished() {
//alert('database rows lengths ' +this.props.users_scroll.length);

 //if (this.row >= this.loadMore.length ) {

  if (this.row >= this.props.users_scroll.length ) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

  render() {
    //const {} = this.state;

 const {user_scroll, users_scroll } = this.props;





    return (
      <div>
        <h1>Infinite Users!</h1>
        <p>Scroll down to load more!!</p>



        {users_scroll.items2 && users_scroll.items2.map(user_scroll => (
          <Fragment key={user_scroll.username}>
            <hr />
            <div style={{ display: 'flex' }}>
              <img
                alt={user_scroll.username}
                src='http://localhost/apidb_react/2.png'
                style={{
                  borderRadius: '50%',
                  height: 72,
                  marginRight: 20,
                  width: 72,
                }}
              />
              <div>
                <h2 style={{ marginTop: 0 }}>
                  @{user_scroll.uuid}
                </h2>
                <p>Name: {user_scroll.name}</p>
                <p>Email: {user_scroll.email}</p>
               <p>Counting: {user_scroll.rcount}</p>
              </div>
            </div>



   </Fragment>
        ))}
{this.finished}
 {this.cText}
<input type="text" className="form-control" name="this.row" id="this.row" value={this.row} onChange={this.handleChange} />  

        <hr />

      </div>
    );
  }
}

const container = document.createElement("div");
document.body.appendChild(container);
render(<InfinitescrollPage />, container);

пользователей.услуга

function getAll_Infinitescroll(us) {

    const request = {
        method: 'POST',

        body: JSON.stringify({us});
    };

    return fetch(`/users.php`, request).then(handleResponse)
     .then(users_scroll => {

            if (users_scroll) {

               console.log(users_scroll);
            }

            return users_scroll;
        });
}

Answer 1

Это было решено.Мне нужно получить количество строк из базы данных и сравнить его с данными проходящей строки.

1.) Чтобы отобразить сообщение Больше нет, оно становится

this.count='20';

или

this.count=this.props.dispatch(userActions.getRowCount());

get finished() {
  if (this.row >= this.count ) {
     return (<li key={'done'}>No More Message to Load.</li>);
  }
  return null;
}

2.) Для предотвращения ненужной прокрутки, когда больше нет данных для отображения

loadMore() {


if (this.row != this.count ) {
 this.cText = "content is Loading ...";
this.row+=this.rowperpage;

setTimeout(()=>{
this.len =this.props.dispatch(userActions.getAll_Infinitescroll(this.row));

this.cText = "";

},100); 
}
}