Question

我正在制作一个本机应用程序。由于FlatList中的onEndReached道具存在问题，因此在到达终点时可以多次触发onEndReached。

我听说过rxjs可以让按钮的onPress仅在某些情况下被触发一次，即使用户多次点击它。

以下是Flatlist：

<FlatList
    data={paginatedList}
    ListHeaderComponent={() => this.renderHeader()}
    renderItem={({item, index}) => this.renderItem(item, index)}
    onEndReachedThreshold={0}
    onEndReached={(distanceFromEnd) => {
        console.log(distanceFromEnd); 
        this.setState({normalListLength: normalListLength + 10})
    }}
/>

我希望this.setState函数限制为每秒一次（1000毫秒）。我应该使用rxjs来做这件事吗？

Answer 1

所以一个可能的解决方案可能是拥有一个你可以 next（）新值（distanceFromEnd）的主题。然后，您可以应用任何运算符组合（包括debounceTime）来强制执行频率限制。

请记住，我的React语法可能不会出现在

上

<FlatList
  data={paginatedList}
  ListHeaderComponent={() => this.renderHeader()}
  renderItem={({item, index}) => this.renderItem(item, index)}
  onEndReachedThreshold={0}
  onEndReached={(distanceFromEnd) => {
    console.log(distanceFromEnd); 
    myOnEndReachedSubject.next(distanceFromEnd);
    this.setState({normalListLength: normalListLength + 10})
  }}
/>

// elsewhere define subject
myOnEndReachedSubject = new Subject<number>();

// ....elsewhere in a lifecycle function  
componentDidMount() {

  myOnEndReachedSubject
    .debounceTime(1000) // debounce for a second
    .distinctUntilChanged()
    .subscribe((distance) => {
       // Do something with distance
       // setState etc
    });
}

rxjs可以控制函数调用的最大频率吗？

1 个答案: