相关疑难解决方法(0)

这是我简单的render()函数category list page.

最近我为我的FlatListView 添加了分页,所以当用户滚动到底部时,onEndReached在某个点(onEndReachedThreshold从底部开始的值长度)中调用,它将获取下一个categories并连接类别props.

但我的问题是在调用render()时调用 onEndReached.换句话说,FlatList onEndReached在它到达底部之前被触发.

我错了价值onEndReachedThreshold?你看到有什么问题吗？

return (
  <View style={{ flex:1 }}>
    <FlatList
      data={this.props.categories}
      renderItem={this._renderItem}
      keyExtractor={this._keyExtractor}
      numColumns={2}
      style={{flex: 1, flexDirection: 'row'}}
      contentContainerStyle={{justifyContent: 'center'}}
      refreshControl={
        <RefreshControl
          refreshing = {this.state.refreshing}
          onRefresh = {()=>this._onRefresh()}
        />
      }
      // curent value for debug is 0.5
      onEndReachedThreshold={0.5} // Tried 0, 0.01, 0.1, 0.7, 50, 100, 700

      onEndReached = {({distanceFromEnd})=>{ // problem
        console.log(distanceFromEnd) // 607, 878 
        console.log('reached'); // once, and …

我在做什么 ？

尝试根据存储在state.data. 有一个按钮，按下后会在 中附加一个新项目state.data。

问题是什么 ？

按下按钮后，我希望 renderItem 仅被调用state.data.length次数，而它被调用2*state.data.length次数。此外，这种 2x 行为并不总是一致的，并且会随着state.data.length增加而变化。

例如： when state.data.length=3，然后在初始渲染时，renderItem 被调用的次数正好是 3 次，这state.data与按下按钮时的项目数相同，按钮将新项目附加到state.datanowstate.data.length=4并且 renderItem 被调用 8 次，即2*state.data.length次数。

但是，当state.data.length=11，然后在初始渲染时，renderItem 被精确调用 21 次，并且在按下将新项目附加到state.data现在的按钮时，state.data.length=12renderItem 被调用 23 次，这偏离了2*state.data.length行为。

我在期待什么？

renderItem 仅state.data.length在初始和后续渲染中被调用的次数。

我试过什么？

1. 从头开始创建一个新项目来测试这种行为，但没有运气。
2. 在 renderItem PureComponent 中制作组件。仍然与提到的行为相同。
3. 在https://codesandbox.io/s/react-native-nn73t 上使用 react-native-web制作了一个 CodeSandbox，其行为与以前相同。请参阅此沙箱以获取代码。
4. 使用诸如 maxToRenderPerBatch、initialNumsToRender 等道具但也无济于事。虽然使用相对较大的它们state.data确实会减少调用 renderItem 的次数，但仍然没有那么大的减少。 …

我在反应原生中使用List View onEndReached组件时遇到了一些麻烦.

渲染代码:

@autobind
  _fetchMoreHistory(){

    console.log("Fetch more history called");

  }

<View style={[styles.Ctr]}>
   <ListView dataSource={this.state.txHistorySource}
         renderRow={ this._renderRow }
         onEndReached ={ this._fetchMoreHistory }
         onEndReachedThreshold  = {10}/>
</View>

我打开屏幕的那一刻_fetchMoreHistory被调用两次并在onEndReached达到之后正常工作.有人可以帮忙调试吗？