提问人:FloodXツ 提问时间:11/17/2023 更新时间:11/17/2023 访问量:19
React Native FlatList 未在构建中更新
React Native FlatList not updating in build
问:
我有一个奇怪的问题。当在 expo 中使用该应用程序时,一切似乎都很好,但是,当我构建应用程序时,在 TestFlight、iOS 中使用它时,刷新机制不起作用。似乎它缓存了它,或者其他什么,但我找不到在哪里。我使用公理。
只有当我重新安装应用程序时,它才会刷新......
我的代码:
import api from '@/utils/Api';
import { AxiosResponse } from 'axios';
import { useState, useRef, useEffect, useCallback } from 'react';
import {
ActivityIndicator,
FlatList,
ListRenderItem,
RefreshControl,
} from 'react-native';
interface InfiniteScrollProps {
endpoint: string;
className?: string;
itemComponent: ListRenderItem<any>;
}
export const InfiniteScroll = ({
endpoint,
itemComponent,
className,
}: InfiniteScrollProps) => {
const [data, setData] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const nextPageIdentifierRef = useRef<number | null>(1);
const [isFirstPageReceived, setIsFirstPageReceived] = useState(false);
const [isRefreshing, setIsRefreshing] = useState(false);
const fetchData = async () => {
setIsLoading(true);
try {
const response = await api.get<PaginationResponse<unknown>>(endpoint, {
params: {
page: nextPageIdentifierRef.current,
order_by: 'created_at',
order: 'desc',
per_page: 10,
},
});
if (!response.data.data) {
nextPageIdentifierRef.current = null;
throw new Error('No data received');
}
const { data: newData, nextPageIdentifier } =
await parseResponse(response);
setData([...data, ...(newData.data as unknown[])]);
nextPageIdentifierRef.current = nextPageIdentifier;
!isFirstPageReceived && setIsFirstPageReceived(true);
} catch (error) {
console.error(error);
} finally {
setIsLoading(false);
}
};
const fetchNextPage = async () => {
if (!nextPageIdentifierRef.current || isLoading || isRefreshing) {
return;
}
await fetchData();
};
const parseResponse = async (
response: AxiosResponse<PaginationResponse<unknown>>,
) => {
const data = response.data;
const nextPageIdentifier =
data.pagination.current_page >= data.pagination.total_pages
? null
: nextPageIdentifierRef.current + 1;
return {
data,
nextPageIdentifier,
};
};
useEffect(() => {
fetchData();
}, []);
const onRefresh = useCallback(async () => {
setIsRefreshing(true);
nextPageIdentifierRef.current = 1;
setData([]);
}, []);
useEffect(() => {
if (isRefreshing && data && data.length === 0) {
console.log('Refreshing');
fetchData().then(() => {
setIsRefreshing(false);
});
}
}, [data, isRefreshing, nextPageIdentifierRef]);
const ListEndLoader = () => {
if (!isFirstPageReceived && isLoading) {
return <ActivityIndicator size={'large'} />;
}
};
if (!isFirstPageReceived && isLoading) {
return <ActivityIndicator size={'small'} />;
}
return (
<FlatList
data={data}
className={className}
keyExtractor={(item, index) => item.id}
renderItem={itemComponent}
refreshControl={
<RefreshControl
refreshing={isRefreshing}
onRefresh={onRefresh}
title="Frissítés"
titleColor={'#9E9E9E'}
tintColor={'#9E9E9E'}
/>
}
onEndReached={fetchNextPage}
onEndReachedThreshold={0.8}
ListFooterComponent={ListEndLoader}
/>
);
};
export default InfiniteScroll;
import { AppConfig } from '@/config/AppConfig';
import * as SecureStore from 'expo-secure-store';
import axios from 'axios';
import { isTokenExpired } from './jwt/JwtExpiration';
const api = axios.create({
baseURL: AppConfig.API_URL,
headers: {
'Content-Type': 'application/json',
Accept: 'application/json',
},
});
api.interceptors.request.use(
async config => {
try {
const [accessToken, refreshToken] = await Promise.all([
SecureStore.getItemAsync('access_token'),
SecureStore.getItemAsync('refresh_token'),
]);
if (!accessToken && !refreshToken) {
return config;
}
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
if (refreshToken && isTokenExpired(accessToken, 10)) {
//get new token
const response = await axios.post(`${AppConfig.API_URL}/auth/refresh`, {
refresh_token: refreshToken,
});
const { access_token, refresh_token } = response.data;
if (access_token && refresh_token) {
await Promise.all([
SecureStore.setItemAsync('access_token', access_token),
SecureStore.setItemAsync('refresh_token', refresh_token),
]);
config.headers.Authorization = `Bearer ${access_token}`;
}
}
} catch (error) {}
return config;
},
error => {
return Promise.reject(error);
},
);
export default api;
非常感谢您的帮助!
答: 暂无答案
评论