React Native FlatList 未在构建中更新

React Native FlatList not updating in build

提问人:FloodXツ 提问时间:11/17/2023 更新时间:11/17/2023 访问量:19

问:

我有一个奇怪的问题。当在 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;

非常感谢您的帮助!

reactjs react-native axios

评论


答: 暂无答案