react-virtualized InfiniteLoader 表未更新答案

【问题标题】：react-virtualized InfiniteLoader Table not updatingreact-virtualized InfiniteLoader 表未更新
【发布时间】：2020-09-17 13:50:11
【问题描述】：

我有一个组件（“事件”），它在 InfiniteLoader 的表中显示事件。 loadMoreRows 函数从服务端点加载数据。很简单的东西。问题是表不会更新加载了 loadMoreRows 的行。该表仅显示定义 list 的硬编码记录。我可以看到 loadMoreRows 被调用并且list 正在更新。 FWIW，它加载在 Material-UI 仪表板中的这个组件。

我觉得我错过了一些简单的东西......但是，我已经在这个问题上挣扎了很长时间，我想我应该寻求一些帮助。

这是组件

const list = [
  {
    event: '123123-5eb4-498f-9d3a-123123123123',
    url: 'blahblha',
    category: 'Amazing Widgets',
  },
];

const remoteRowCount = 1000;

export default class Event extends React.PureComponent {
  constructor(props, context) {
    super(props, context);
    const sortDirection = SortDirection.ASC;
    this.props = props;
    this.state = {
      sortDirection,
    };
  }

  isRowLoaded({index}) {
    return !!list[index];
  }

  loadMoreRows({ startIndex, stopIndex }) {
    console.log('finding', startIndex, stopIndex);
    return eventService.find().then(data => {
      for (let i = 0; i < data.length; i++) {
        list.push({
          event: data[i].event_id,
          url: data[i].page_url,
          category: data[i].se_category,
        });
      }
      console.log(list);
    });
  }

  // Render your list
  render() {
    return (
      <InfiniteLoader
        isRowLoaded={this.isRowLoaded}
        loadMoreRows={this.loadMoreRows}
        rowCount={remoteRowCount}
      >
        {({ onRowsRendered, registerChild }) => (
          <Table
            ref={registerChild}
            onRowsRendered={onRowsRendered}
            headerHeight={40}
            width={300}
            height={300}
            rowHeight={40}
            rowCount={list.length}
            rowGetter={({index}) => list[index]}
          >
            <Column label="Event" dataKey="event" width={300}/>
            <Column label="Url" dataKey="url" width={400}/>
            <Column label="Category" dataKey="category" width={100}/>
          </Table>
        )}
      </InfiniteLoader>
    );
  }
}

这是 loadMoreRows 完成后列表中的前 6 个元素。

0: {event: "123123-5eb4-498f-9d3a-123123123123", url: "blahblha", category: "Amazing Widgets"}
1: {event: "dbcbb9af-2ab0-47c1-8acc-94ee1aef451d", url: "blahblha", category: "Bing Bong"}
2: {event: "bd134bbf-a227-4fb4-b3ea-28ae0e267a10", url: "blahblha", category: "Bing Bong"}
3: {event: "9aefce0c-fcbe-4e9e-b20c-28fcff7c6f14", url: "blahblha", category: "Bing Bong"}
4: {event: "32d13a5f-c2d8-448d-9bdf-5f23f95ff12b", url: "blahblha", category: "Bing Bong"}
5: {event: "e0e7d374-5d97-4d63-836e-d31ca302143f", url: "blahblha", category: "Bing Bong"}
6: {event: "88e60b53-3f8e-4e1d-bbd7-ef3fea0ade1d", url: "blahblha", category: "Bing Bong"}

就像我说的，我只看到元素 0。

没有错误。

谢谢！

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

根据InfiniteLoader in GitHub，您的 loadMoreRows 函数应该返回一个 Promise：“一旦行数据完成加载，返回的 Promise 应该被解析。它将用于确定何时用新加载的数据刷新列表。这个回调可以多次调用以响应单个滚动事件。”

例如：

function loadMoreRows({ startIndex, stopIndex }) {
    return new Promise((resolve, reject) => {
        eventService.find().then(data => {
            ...
            resolve();
        });
    });
}

【讨论】：