Я использую бесконечную прокручивающуюся таблицу Flatlist реактивного натива, упомянутую в inte rnet. Пока это хорошо для длинных данных. Но когда пагинация остальных API завершена, возвращается пустой массив JSON. Теперь с бесконечной схемой прокрутки функция onEndReached генерируется бесконечно, что приводит к ненужному вызову rest. Итак, как лучше всего справиться с этой ситуацией.
Данные из API могут быть одной строкой или 500 строками объекта JSON в зависимости от условного URL, указанного в коде. В случае 500 строк, это нормально, пока есть больше данных для выборки, но после последней 480-500 партий это становится бесконечным l oop, что является проблемой. В случае 1 строки она сразу становится бесконечной l oop. Как можно условно прервать событие onEndReached, чтобы оно никогда не срабатывало при обнаружении пустого массива из API остальных.
Ниже приведена моя реализация Flatlist:
import React, { Component } from 'react';
import { StyleSheet, Text, View, FlatList, Image, ActivityIndicator, TouchableOpacity, ToastAndroid } from 'react-native';
import * as SecureStore from 'expo-secure-store';
import GLOBAL from './productglobal'
import { Ionicons } from '@expo/vector-icons';
import SearchBar from '../commoncomponents/searchbar'
export default class ProductsList extends Component {
static navigationOptions = ({ navigation }) => {
return {
headerTitle: 'Products',
headerRight: () => (
<TouchableOpacity
style={{ paddingRight: 20 }}
onPress={() => { navigation.navigate("Settings") }}
>
<Ionicons name='md-more' size={25} color='white' />
</TouchableOpacity>
),
}
};
constructor(props) {
super(props);
this.state = {
loading: false,
searchValue: '',
data: [],
page: 1,
error: null,
refreshing: false,
base_url: null,
c_key: null,
c_secret: null,
};
GLOBAL.productlistScreen = this;
}
async componentDidMount() {
await this.getCredentials();
this.fetchProductList();
}
getCredentials = async () => {
const credentials = await SecureStore.getItemAsync('credentials');
const credentialsJson = JSON.parse(credentials)
this.setState({
base_url: credentialsJson.base_url,
c_key: credentialsJson.c_key,
c_secret: credentialsJson.c_secret,
})
}
fetchProductList = () => {
const { base_url, c_key, c_secret, page, searchValue } = this.state;
let url = null
if (searchValue) {
url = `${base_url}/wp-json/wc/v3/products?per_page=20&search=${searchValue}&page=${page}&consumer_key=${c_key}&consumer_secret=${c_secret}`;
} else {
url = `${base_url}/wp-json/wc/v3/products?per_page=20&page=${page}&consumer_key=${c_key}&consumer_secret=${c_secret}`;
}
console.log(url)
this.setState({ loading: true });
setTimeout(() => {
fetch(url).then((response) => response.json())
.then((responseJson) => {
this.setState({
data: this.state.data.concat(responseJson),
error: responseJson.code || null,
loading: false,
refreshing: false
});
}).catch((error) => {
this.setState({
error,
loading: false,
refreshing: false
})
});
}, 1500);
};
renderListSeparator = () => {
return (
<View style={{
height: 1,
width: '100%',
backgroundColor: '#999999'
}} />
)
}
renderListFooter = () => {
if (!this.state.loading) return null;
return (
<View style={{
paddingVertical: 20,
}}>
<ActivityIndicator color='#96588a' size='large' />
</View>
)
}
handleRefresh = () => {
this.setState({
page: 1,
refreshing: true,
data: []
}, () => {
this.fetchProductList();
}
)
}
handleLoadMore = () => {
console.log('loading triggered')
this.setState({
page: this.state.page + 1,
}, () => {
this.fetchProductList();
})
}
handleSearch = (value) => {
// console.log(value)
this.setState({
searchValue: value,
page: 1,
refreshing: true,
data: []
}, () => {
this.fetchProductList()
})
}
render() {
return (
<View style={{flex:1}}>
<SearchBar onSearchPress={this.handleSearch}></SearchBar>
<FlatList
data={this.state.data}
keyExtractor={item => item.id.toString()}
refreshing={this.state.refreshing}
extraData={this.state.data}
onRefresh={this.handleRefresh}
onEndReached={this.handleLoadMore}
onEndReachedThreshold={0.5}
ItemSeparatorComponent={this.renderListSeparator}
ListFooterComponent={this.renderListFooter}
renderItem={({ item }) =>
<TouchableOpacity onPress={() => {
this.props.navigation.navigate('ProductDetails', {
productId: item.id,
productName: item.name,
base_url: this.state.base_url,
c_key: this.state.c_key,
c_secret: this.state.c_secret
});
}}>
<View style={{ flex: 1, flexDirection: 'row', backgroundColor: 'white' }}>
<View style={{ flex: 1, justifyContent: "center", alignContent: "center" }}>
<Image source={(Array.isArray(item.images) && item.images.length) ?
{ uri: item.images[0].src } :
require('../../../assets/images/blank_product.png')}
onError={(e) => { this.props.source = require('../../../assets/images/blank_product.png') }}
style={{ height: 115, width: 115 }} resizeMode='contain' />
</View>
<View style={{ flex: 2, marginTop: 10, marginBottom: 10, justifyContent: "center" }}>
<View style={{ marginLeft: 10 }}>
<Text style={styles.titleText}>{item.name}</Text>
<Text>SKU: {item.sku}</Text>
<Text>Price: {item.price}</Text>
<Text>Stock Status: {item.stock_status}</Text>
<Text>Stock: {item.stock_quantity}</Text>
<Text>Status: {item.status}</Text>
</View>
</View>
</View>
</TouchableOpacity>
}
/>
</View>
);
}
}
const styles = StyleSheet.create({
titleText: {
fontSize: 20,
fontWeight: 'bold',
}
});