相关疑难解决方法(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 …

我正在做一个本机反应项目，用户可以使用Flickr API搜索图像，其他所有工作都很好，但是实现分页时遇到了问题。我已经使用FlatList onEndReached来检测用户何时滚动到列表的末尾，但是问题onEndReached却被调用了多次（包括第一次渲染期间）。我什至已禁用弹跳，如此处所说，但仍被多次调用

 export default class BrowserHome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      tagParam: "cat",
      pageNum: -1,
      data: [],
      photosObj: ""
    };
  }

  componentDidMount() {
    this.setState({
      isLoading: true
    });
    try {
      this.makeRequest();
    } catch {
      console.log("error has occurred");
    }
  }

  makeRequest = () => {
    const { tagParam, pageNum } = this.state;
    let url = `https://api.flickr.com/services/rest/? 
               method=flickr.photos.search
               &api_key=${apiKey}&format=json&tags=${tagParam}
               &per_page=30&page=${pageNum + 1}&nojsoncallback=1`;
    fetch(url, {
      method: "GET"
    })
      .then(response => response.json())
      .then(responseJSON …