ios - FlatList onEndReached 被多次调用-6ren

ios - FlatList onEndReached 被多次调用

转载作者：可可西里更新时间：2023-11-01 04:49:13

26

4

<分区>

我正在制作一个 React Native 项目，用户可以在其中使用 Flickr API 搜索图像，其他一切工作正常，但我在实现分页时遇到了问题。我已经使用 FlatList 的 onEndReached 来检测用户何时滚动到列表的末尾，但问题是 onEndReached 被多次调用(包括第一次渲染期间的一次) .如前所述，我什至禁用了弹跳 here但它仍然被调用不止一次

 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 => {
        this.setState({
          data: this.state.data.concat(responseJSON.photos.photo),
          isLoading: false,
          pageNum: responseJSON.photos.page
        });
      })
      .catch(error => {
        console.log(error);
        this.setState({ isLoading: false });
        throw error;
      });
  };

  render() {
    if (this.state.isLoading) {
      return <ActivityIndicator animating={true} size="large" />;
    }

    return (
      <View
        style={{
          flex: 1,
          height: 200,
          justifyContent: "flex-start",
          width: screenSize.width,
          backgroundColor: "black"
        }}
      >
        <Text>This is browserhome</Text>
        <FlatList
          style={{
            width: screenSize.width
          }}
          numColumns={3}
          data={this.state.data}
          keyExtractor={item => item.id}
          bounces={false}
          onEndReachedThreshold={1}
          onEndReached={({ distanceFromEnd }) => {
            this.loadMoreItem();
            alert("end reached call");
          }}
          renderItem={({ item, index }) => (
            <>
              <ImageTile imageURL={this.createImageURL(item)} />
            //  <Text style={{ color: "white" }}>
             //   {index}
             //   {console.log(index)}
             // </Text>
            </>
          )}
        />
      </View>
    );
  }

  createImageURL(item) {
    let server = item.server,
      id = item.id,
      secret = item.secret;
    let urlString = `https://farm${
      item.farm
    }.staticflickr.com/${server}/${id}_${secret}_s.jpg`;
    return urlString;
  }

  loadMoreItem() {
    this.makeRequest();
  }
}

26

4

0

文章推荐： javascript - 如何选择没有第一个图像的所有图像？

文章推荐： javascript - 如何停止运行此 setTimeout 函数？

performance - ReactNative Flatlist - Flatlist 项的优化性能
当我们有大数据时如何优化 Flatlist 的性能。我的列表既有图片又有文字说明。我想找到一种方法来提高列表的性能并删除从缓存列表中加载的额外图像，并使列表不重。最佳答案 FlatList 组件
css - FlatList 之前的元素固定在页面上，不会随 FlatList 滚动
我在 flatlist 之前有一个 flatlist 元素和另一个元素。当我向上滚动时，flatlist 之前的元素不会上升并且是固定的。有没有办法让它在faltlist向上滚动的时候上升？例子:
javascript - 访问子 FlatList 中的父 FlatList 数据
我在一个父级 FlatList 中渲染多个 FlatList 子级 {item.name} HOW DO I
react-native - 当 FlatList 正在加载新项目时，FlatList 项目不会响应触摸
我的列表组件是这样的: ( )} keyExtractor={() => cuid.slug()} ListHeaderComponent={}
react-native - React Native FlatList 嵌套在具有相同方向的 FlatList 中
我无法创建嵌套在具有相同方向的 FlatList 内的 FlatList；结果是父级是水平的，而子级是垂直的；这是我的代码: renderSlides(question) { return
react-native - React Native Flatlist 看不到 flatlist 的底部
我想显示一个平面列表，但我有一个问题。在手机底部，我无法显示帖子的完整性，也不要滚动到它。我不知道为什么。有些问题？我尝试了一些有风格的间距东西，但这不像我想要的那样工作。 import React,
react-native - React Native - 在 FlatList 之外触发 FlatList 的滚动
我有一个垂直的 FlatList 组件和两个按钮作为 TouchableOpacity，我如何使用按钮执行 FlatList 的滚动，即“将 FlatList 滚动到底部”和“将 FlatList
react-native - React Native - 在 FlatList 之外触发 FlatList 的滚动
我有一个垂直的 FlatList 组件和两个按钮作为 TouchableOpacity，我如何使用按钮执行 FlatList 的滚动，即“将 FlatList 滚动到底部”和“将 FlatList
react-native-flatlist - 在 React Native Web 上将数据添加到 FlatList，同时保持可见内容
是否可以使用实现平面列表？ react 原生网络在保持可见内容的同时在哪里添加数据？现在，当您添加某些内容时，它会跳到 Flatlist 的顶部。我正在使用 onContentSizeChang
reactjs - FlatList 调用两次
我有这个代码 class Home extends Component { constructor(props) { super(props); this.state = {
javascript - FlatList 使用静态组件滚动
我在一个屏幕中有一个静态组件和许多 for 循环渲染组件。所有代码都在下面。 import React from "react"; import { View, Text, FlatList } f
javascript - 实现拉取刷新 FlatList
请帮助我在我的应用程序上实现拉动刷新，我对 native react 有点新，谢谢。我不知道如何处理 onRefresh 和刷新。 class HomeScreen extends Component
javascript - Flatlist 在向其传递另一个数据后不会刷新
我有以下情况:渲染函数中屏幕上有一个 FlatList: render() { console.log('In render'); const { data } = this.
javascript - FlatList 不渲染图像
我遇到了 FlatList 问题，我正在尝试使用从数据库获取的数据来渲染图像。但什么也没有出现。我可以从控制台看到数据，正如您在此处看到的: 但是当我尝试访问照片时，它给了我两个错误: 类型错误:无法
javascript - 如何用两个数组渲染 FlatList？
我想渲染 FlatList有两个数组 name和photo 。希望我的FlatList每个项目都包含名称和照片。但我不知道如何将它们合并到我的 FlatList 中数据。 console.log 我
javascript - Flatlist 不会在状态更改时重新渲染
我有一个 FlatList，当状态发生变化时它不会重新渲染。如何让 FlatList 重新渲染？ _renderItem = ({item}) => { if(item=='null'){
javascript - FlatList 列表项背景颜色
是否可以将 FlatList 的背景颜色设置为透明？我有应用程序背景图像并想将其用作屏幕背景。但是FlatList中的ListItem似乎需要设置一些颜色。同样的问题也适用于标题。 re
javascript - FlatList 中的替代颜色
如何在 FlatList 中替换颜色？ I tried the following example ，但我无法让它工作。下面是我的代码: _renderItem = ({ item, index }
javascript - FlatList 未正确呈现
我正在实现 FlatList，但它没有提供所需的渲染输出。这是我的代码: App.js import React from 'react'; import Main from './componen
javascript - FlatList 将单个项目转换为数组
在我的应用程序中，我使用 axios 获取数据。正如我们所知，我们不能将 FlatList 中的数据渲染为一个对象，它必须是一个数组。当我从服务器获取数据时，如果它是单个项目，它就是对象，如果它不止一

首页

博学

6Ren·AI

商城

ios - FlatList onEndReached 被多次调用