Array is showing empty initially, and I believe it's causing ".map is not a function"-CodePudding

I am attempting to fetch some data from a strapi api and I'm running into an issue where it's stating that .map is not a function of badgeCategories.

Here is a sample of the code which fetches the API and updates badgeCategories.

    export default function Home({ posts }) {

    const [badgeCategories, setbadgeCategories] = useState([]);
  
    useEffect(() => {
    const fetchBadgeCatData = async () => {
      const badgeCatResult = await api.getBadgeCategories();

      setbadgeCategories(badgeCatResult.data);
     };
    fetchBadgeCatData();
    }, [])

I attempted to console log badgeCategories and noticed that the array is initially empty on first run.

    {console.log(badgeCategories)}

When the code gets to

     {badgeCategories.map((g) => (
            <div>

I get an error thrown stating

TypeError: badgeCategories.map is not a function

My assumption is that the error is being thrown because the array is initially showing as empty so it cannot process the .map function; however I'm kind of stuck and have not been able to resolve this yet. Any help would be greatly appreciated and I'm sure it's something simple I'm missing.

Full Map Body:

{badgeCategories.map((g) => (
            <div>
              <div className="pt-6 pb-4">
                <h1 className="text-2xl font-extrabold leading-4 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-2xl md:leading-9">
                  {g.attributes}
                </h1>
                <p className="text-md text-gray-500 dark:text-gray-400">
                  {g.description}
                </p>
              </div>
              <div className="container">
                <div className="flex flex-wrap">
                  <ul className="w-full space-y-2">
                  
                  {itemData.filter(item => item.group == g.id).map(filteredItem => (
                    <li key={filteredItem.order}>
                    <Item
                      type={filteredItem.type}
                      text={filteredItem.text}
                      color={filteredItem.color}
                      href={filteredItem.href}
                      hrefActive={filteredItem.hrefActive}
                      />
                    </li> 
                  ))}
                  </ul>
                  
                </div>
              </div>
            </div>
          ))}

CodePudding user response：

You are correct that the array is empty initially. However, this should not throw an error as you set an initial value for the array in your useState call:

const [badgeCategories, setbadgeCategories] = useState([]);
//                                            here     ^^

What could be causing an issue is actually not when the data has not loaded but when the data already has loaded. Based on the screenshot of your console, it seems that the new data is not an array.

[] // before the data loads, `badgeCategories` is an empty array.
{ data: Array(2), meta: {...} } // after it loads, `badgeCategories` is an object 
                                // containing a `data` property of an array.

This seems to be coming from this line of code:

const badgeCatResult = await api.getBadgeCategories();
setbadgeCategories(badgeCatResult.data); // NOT an array!

It seems that badgeCatResult.data is not an array, but an object containing a data property that is an array. Try using this instead:

const badgeCatResult = await api.getBadgeCategories();
setbadgeCategories(badgeCatResult.data.data); // This should work!

CodePudding user response：

You can simply avoid the error by checking badgeCategories is a valid Array before calling map

{Array.isArray(badgeCategories) && badgeCategories.map((g) => (
            <div>
    .....
    )
  }