1 回答

TA貢獻2016條經驗 獲得超9個贊
當您滾動到底部時,您正在調用一個超時的異步函數。該超時將覆蓋您的以下代碼并將 loading 再次設置為 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 塊中將 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;
這里有一個工作演示(使用 iOS 設備)
添加回答
舉報