无限滚动列表不会加载更多数据答案

【问题标题】：Infinitely scrollable list won't load more data无限滚动列表不会加载更多数据
【发布时间】：2021-02-09 19:34:44
【问题描述】：

我有一个可无限滚动的组件，我希望它在用户滚动到页面底部时加载更多数据，但它只是加载第一组数据然后停止。以下是我的代码：

import { Avatar, List, Spin, message } from 'antd';
import React, { Component } from 'react';

import InfiniteScroll from 'react-infinite-scroller';
import Services from '../../services/Services';

/**
 * infinitely scrollable timeline of uploaded content
 */
class Timeline extends Component {

  /**
   *
   * @param {*} props
   */
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      hasMore: true,
      data: []
    };
    this.fetchData = this.fetchData.bind(this);
  }

  /**
   * on load
   */
  componentDidMount() {
    this.fetchData();
  }

  /**
   * fetch the data
   */
  fetchData() {
    Services.getData()
        .then((response) => this.handleData(response))
        .catch((error) => this.handleError(error));
  }


  /**
   * handle the data
   * @param {*} response
   */
  handleData(response) {
    const data = this.state.data.concat(response.data);
    this.setState({ data: data });
  }

  /**
   * handle the infinite on load
   */
  handleInfiniteOnLoad() {
    this.setState({
      loading: true,
    });
    this.fetchData();
    this.setState({
      loading: false
    });
  };

  /**
   * handle any error
   * @param {*} error
   */
  handleError(error) {
    console.log(error);
  }

  /**
   * @return {*}
   */
  render() {
    return (
      <div className="demo-infinite-container">
        <InfiniteScroll
          initialLoad={false}
          pageStart={0}
          loadMore={this.fetchData}
          hasMore={!this.state.loading && this.state.hasMore}
          useWindow={true}
          loader={<div className="loader" key={0}>Loading ...</div>}
        >
          <List
            dataSource={this.state.data}
            renderItem={item => (
              <List.Item key={item.id}>
                <List.Item.Meta
                  avatar={
                    <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                  }
                  title={<a href="https://ant.design">{item.id}</a>}
                  description={item.id}
                />
                <div>Content</div>
              </List.Item>
            )}
          >
            {this.state.loading && this.state.hasMore && (
              <div className="demo-loading-container">
                <Spin />
              </div>
            )}
          </List>
        </InfiniteScroll>
      </div>
    );
  }
}
export default Timeline;

代码是从 ant design 复制的，但它使用的是我从后端检索到的我自己的数据。

提前致谢！

【问题讨论】：

在InfiniteScroll 道具中使用loadMore={this.fetchData} 这个而不是loadMore={this.fetchData()}
我已经完成了，现在滚动到底部时它不会加载更多数据
那是不同的问题，你需要为hasMore设置一个合适的值，现在试试hasMore={true}
我现在意识到这是一个不同的问题，并相应地更新了问题，感谢您的帮助。我已经为 hasMore 设置了一个合适的值，它等于 true
您需要在this.state.data中添加增加数据的逻辑，如果滚动时有更多数据，您的loadMore函数会一次性下载所有数据，您可以将所有数据存储在状态和何时loadMore 被调用来增加你正在渲染的数据。

标签： javascript reactjs react-infinite-scroll

【解决方案1】：

我终于发现我需要为周围的 div 添加样式以使其可滚动，而不是整个页面都可滚动。代码如下：

<div className="demo-infinite-container" style={{ overflow: 'auto', padding: '8px 24px', height: '300px'}}>

【讨论】：