个人中心
gpt4 book ai didi

javascript - ListFooterComponent 无法正常工作？

转载 作者：行者123 更新时间：2023-12-02 21:12:15 26 4
gpt4 key购买 nike

我对 Flatlist 有一个奇怪的问题，当我向下滚动时，我从 API 获取数据，我增加页面 +1 并在页脚中渲染一个微调器，但是当最后一页 == 当前页面时，这意味着没有数据出现，但微调器卡在底部，尽管我更新就假了!那么这里出了什么问题!

顺便说一句当我在 FlatList 中像这样调用 renderFooter 时

ListFooterComponent={()=> this._renderFooter()} // it disappeare the bottom spiner if last page == current page but I have an unexpected re-rendering and app laggay and in some time spinner disappeared even I scrolling to bottom!!

代码

class LastSongs extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      songs: [],
      loading: false,
      page: 1,
      last_page: 1,
    };
    this.isCancelled = false;
  }

  manipulateArray = async (array) => {
    let songs = [];
    array.map((track) =>
      songs.push({
        id: track.id,
        name: track.name,
        url: URL + track.sounds,
        img: URL + track.avatar,
      }),
    );
    return songs;
  };

  getData = async () => {
    try {
      this.setState({loading: true});
      let response = await API.get(`/tracks?page=${this.state.page}`);
      let lastPage = response.data.data.items.last_page;
      let {
        data: {
          data: {
            items: {data},
          },
        },
      } = response;
      let All_Songs = await this.manipulateArray(data);
      this.setState({
        songs: this.state.songs.concat(All_Songs),
        last_page: lastPage,
      });
    } catch (err) {
      console.log('err', err);
    }
  };

  _renderItems = ({item, index}) => (
    <TouchableNativeFeed
      key={item.id}
      onPress={() => {
        this.props.saveSongs(this.state.songs, index);
        this.props.isPlaying(true);
        this.props.isPauseTrigger(!this.props.isPauseTrigger);
      }}
      background={TouchableNativeFeedback.Ripple('white')}
      delayPressIn={0}
      useForeground>
      <Card
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#121212',
          flex: 1,
        }}>
        <FastImage
          source={{uri: item.img}}
          resizeMode={FastImage.resizeMode.cover}
          style={styles.cardImg}
        />
        <Body style={{...styles.cardItem, width: '100%'}}>
          <View style={styles.radioCardName}>
            <Text style={styles.text} numberOfLines={1}>
              {item.name}
            </Text>
          </View>
        </Body>
      </Card>
    </TouchableNativeFeed>
  );

  handleLoadMore = () => {
    if (this.state.page <= this.state.last_page - 1) {
      this.setState({loading: false, page: this.state.page + 1}, () =>
        setTimeout(() => {
          this.getData();
        }, 800),
      );
    } else if (this.state.page === this.state.last_page) {
      this.setState({loading: false}, () =>
        console.log('if--loading', this.state.loading),
      );
    }
  };

  _renderFooter = () => {
    return this.state.loading ? (
      <View style={styles.loader}>
        <ActivityIndicator color="#ebff64" size="large" />
      </View>
    ) : null;
  };
  componentDidMount() {
    this.getData();
  }

  _keyExtractor = (song) => song.id;

  _renderListEmptyComponent = () => <EmptyList />;
  render() {
    console.log('App rerender!');
    return (
      <Container style={styles.container}>
        <Header
          style={styles.darkHeader}
          androidStatusBarColor="#121212"
          iosBarStyle="light-content">
          <Left>
            <Button transparent onPress={() => this.props.navigation.goBack()}>
              <Icon name="ios-arrow-forward" style={styles.colorWhite} />
            </Button>
          </Left>
          <Body>
            <Title style={styles.headerText}>اخر الاغاني</Title>
          </Body>
          <Right></Right>
        </Header>
        <FlatList
          data={this.state.songs}
          keyExtractor={this._keyExtractor}
          initialNumToRender={10}
          contentContainerStyle={styles.contentContainerStyle}
          columnWrapperStyle={styles.columnWrapperStyle}
          numColumns={2}
          ListEmptyComponent={this._renderListEmptyComponent}
          renderItem={this._renderItems}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={0.7}
          ListFooterComponent={this._renderFooter}
          removeClippedSubviews={true}
          maxToRenderPerBatch={100} // Increase time between renders
        />
      </Container>
    );
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    isPlaying: (_isPlaying) => {
      dispatch(isPlayingAction(_isPlaying));
    },

    isPauseTrigger: (_isPause) => {
      dispatch(isPauseAction(_isPause));
    },

    saveSongs: (songs, index) => {
      dispatch(saveSongsPlayer(songs, index));
    },
  };
};

export default connect(null, mapDispatchToProps)(LastSongs);

最佳答案

当您滚动到底部时，您正在调用一个超时的异步函数。该超时将覆盖您的以下代码并再次将加载设置为 true。所以在这种情况下加载永远不会错误。 

 } else if (this.state.page === this.state.last_page) {
      this.setState({loading: false}, () =>
        console.log('if--loading', this.state.loading), // log false!! that's mean a spinner should disapeare
      );
 }

这里你需要两件事。

1) 尝试在catch block 中将loading 设置为false。 

} catch (err) {
   console.log('err', err);
   this.setState({loading: false});
}

2) 在状态 isAllDataFetched 中添加另一个值，初始值为 false。当您从 API 收到空数据时，将 loading 设置为 false。不确定您的数据是什么样子，但执行类似的操作；

getData = async () => {
    try {
      this.setState({loading: true});
      let response = await API.get(`/tracks?page=${this.state.page}`);
      let lastPage = response.data.data.items.last_page;
      let {
        data: {
          data: {
            items: {data},
          },
        },
      } = response;

      // if it's an array
      if(data.length === 0) {
         this.setState({loading: false, isAllDataFetched: true});
      }
      //...
    } catch (err) {
      console.log('err', err);
    }
  };

最后，在您的 handleLoadMore 方法中添加以下行。

handleLoadMore = () => {
 if(this.state.isAllDataFetched) return;
<小时/>

我为您创建了一个演示。您可以遵循这个逻辑来使其发挥作用。它与您所拥有的有点不同，但我认为它会有所帮助。

这是代码。

import React from 'react';
import {
  View, Text, FlatList, ActivityIndicator, SafeAreaView
} from 'react-native';


class App extends React.PureComponent {
  state = {
    songs: [
      {
        userId: 1,
        id: 1,
        title: 'delectus aut autem 1',
        completed: false,
      },
      {
        userId: 1,
        id: 2,
        title: 'delectus aut autem 2',
        completed: false,
      },
    ],
    loading: false,
    page: 3,
    totalPage: 10,
  };

  componentDidMount() {
    this.getData();
  }

  getData = async () => {
    const { songs } = this.state;
    try {
      this.setState({ loading: true });
      const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${this.state.page}`, {
        headers: {
          'Content-Type': 'application/json',
        },
      });
      const json = await response.json();

      this.setState({
        songs: [...songs, json],
      });
      this.setState({ loading: false });
    } catch (err) {
      console.log('err', err);
      this.setState({ loading: false });
    }
  };

  renderItems = ({ item }) => (
    <Text style={{ backgroundColor: 'blue', height: 200, marginBottom: 5 }}>{`${item.title}-${item.id}`}</Text>
  );

  onEndReached = () => {
    const { page, loading, totalPage } = this.state;

    if (loading) return;

    if (page <= totalPage) {
      this.setState({ loading: true, page: page + 1 }, () =>
        setTimeout(() => {
          this.getData();
        }, 2000));
    } else {
      this.setState({ loading: false });
    }
  }

  renderFooter = () => {
    const { loading } = this.state;

    if (loading) {
      return (
        <View>
          <ActivityIndicator color="#000" size="large" />
        </View>
      );
    }
    return null;
  }

  renderListEmptyComponent = () => <View />;

  render() {
    const { songs } = this.state;
    return (
      <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
        <FlatList
          data={songs}
          keyExtractor={song => song.id}
          initialNumToRender={10}
          contentContainerStyle={{ flexFrow: 1, backgroundColor: 'white' }}
          style={{ flex: 1 }}
          ListEmptyComponent={this.renderListEmptyComponent}
          renderItem={this.renderItems}
          onEndReached={this.onEndReached}
          onEndReachedThreshold={0.7}
          ListFooterComponent={this.renderFooter}
        />
      </SafeAreaView>
    );
  }
}
export default App;

并且可以使用工作演示 here (使用iOS设备)

关于javascript - ListFooterComponent 无法正常工作？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61058796/

26 4 0
文章推荐： javascript - 如何从选择器到 json 文档进行选择？
文章推荐： javascript - Highcharts Angular Chart 未从 renderer.button 事件中 redrwan
文章推荐： javascript - 每当我滚动浏览该部分时突出显示我的导航栏菜单项？仅使用 JavaScript
文章推荐： javascript - 带事件发射器的触发功能
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com