数组最初显示为空，我相信这是导致“.map 不是函数”错误的原因

Question

我正在尝试从 strapi api 获取一些数据，但我运行遇到了一个问题，它指出 .map 不是 badgeCategories 的函数.

这是获取 API 和更新 badgeCategories 的代码示例。

    export default function Home({ posts }) {

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

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

我试图控制日志 badgeCategories 并注意到数组最初是空的运行。

    {console.log(badgeCategories)}

当代码到达

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

我收到一个错误提示

TypeError: badgeCategories.map is not a function

我的假设是抛出错误是因为数组最初显示为空，因此无法处理 .map 函数；但是我有点卡住了，还没能解决这个问题。任何帮助将不胜感激，我确信我缺少的是简单的东西。

完整地图主体：

{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>
          ))}

Answer 1

你说得对，数组最初是空的。但是，当您在 useState 调用中为数组设置初始值时，这不应引发错误：

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

可能导致问题的原因实际上不是数据尚未加载，而是数据已经加载。从你控制台的截图看，新数据好像不是数组。

[] // 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.

这似乎来自这行代码：

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

好像badgeCatResult.data不是一个数组，而是一个包含一个data属性的对象，那是一个数组。试试改用这个：

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

Answer 2

您可以通过在调用 map

之前检查 badgeCategories 是否为有效数组来简单地避免错误

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

数组最初显示为空，我相信这是导致“.map 不是函数”错误的原因

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

reactjs

strapi

next.js