Problem rendering flatlist data with api sauce

46 views Asked by At

So i'm building a very simple mobile app that fetches clients data .so far everything is working fine. The only problem i keep encountering is rendering Flatlist data using api sauce. My api call is successful, i receive all the data from the database. When i reload expo the data doesn’t show yet when i hit save ‘cmd + s’ of my code the data get displayed successfully displayed. So i don’t understand why my data doesn’t get rendered when the component get mounted. here's my code

// i built hook for my api calls
import useApi from "../../hooks/useApi";

const getFoldersApi = useApi(foldersApi.getFolders);
const [foldersList, setFoldersList] = useState([]);

            useEffect(() => {
                getFoldersApi.request();
                setFoldersList(getFoldersApi.data);
              }, []);

<FlatList
            style={styles.folders}
            /// here reside the problem
            data={foldersList}
            keyExtractor={(folder) => folder.Guid}
            renderItem={({ item, index }) => (
              <Card
                title={item.Nom}
                image={folderIcon}
                index={index}
                folderType={item.TypeDossier}
                folderState={item.EtatDossier}
                depositDate={item.DatedepoDossier}
                shippingType={item.TypeManifeste}
                vendor={item.Fournisseur}
                onPress={() => navigation.navigate("Détails", item)}
              />
            )}
          />

my api hook

import { useState } from "react";

export default useApi = (apiFunc) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const request = async (...args) => {
    setLoading(true);
    const response = await apiFunc(...args);
    setLoading(false);

    if (!response.ok) return setError(true);

    setError(false);
    setData(response.data);
  };

  return { data, error, loading, request };
};

here's what i mean if any of you didn't understand my problem enter image description here

0

There are 0 answers