React Redux + Infinite Scroll =重新渲染整个列表？

Question

React的新手，我正在尝试使用此组件https://github.com/danbovey/react-infinite-scroller将无限滚动集成到我的列表组件（使用redux）中。

但是，我面临的问题是，当我向下滚动到列表底部时，它成功加载了更多项目，但似乎重新渲染了整个列表，而不是仅将新项目渲染到列表的底部。列表。这也会导致窗口滚动回到顶部，这不是我期望的。

有什么想法吗？在下面发布我的代码：

$var: null;

:root {
  --someVar: $var;
}

@mixin checkForVariable {
  @if variable-exists(var){
    body {
      background-color: red;
    }
  }
  //  @if variable-exists() {
  //    ...
  //  }
  //  @if variable-exists() {
  //    ...
  //  }
  @else {
    body {
      background-color: blue;
    }
  }
}

@include checkForVariable;

Answer 1

可以尝试以下方法：

1. 确保已定义item.id。否则，React将重新渲染整个列表。
2. 在获取下一组项目时，请注意存在三元条件items.isFetching ? items.error block : InfiniteScroll。这将导致<InfiniteScroll />在每次获取时都重新安装。