getStaticPaths - data.map 不是 function

Question

我在我的博客項目中使用帶有 Next.js 的 Strapi

我正在嘗試通過在 pages/posts/[id].js 中使用 [id].js 來制作動態頁面

但是，問題是當我嘗試通過 getStaticPaths() 中 Strapi 的 API 嘗試 map 時，它給了我一個數據錯誤。map 未定義

注意：- 我使用 NextJS V12.0.8 和 Strapi V4.0.4

下面是我的代碼

export async function getStaticPaths() {
  const postsRes = await axios.get("http://localhost:1337/api/posts?populate=image");
 
  const paths = postsRes.map((post) => {
    return { params: {id: post.id.toString()} }
  });

  // const paths = { params: {id: '1' } }
    
  return {
    paths,
    fallback: false
 
  }
 
}

完成[id].js頁面代碼鏈接 - https://pastebin.com/SnzLirys

錯誤截圖 - https://prnt.sc/26ha6z5

Answer 1

不知何故 axios 是問題所在。 對於下一代 - 嘗試使用 fetch 而不是 axios 獲取數據，在我的情況下它可以工作。

Answer 2

apparently you need to set up a context to use axios inside that function, or you can try to format the axios response to json.stringfy and then use json.parse in it. 或者只是使用獲取。

如果您使用的是下一個 api 文件夾，請不要在此處調用 fetch 或 axios，只需像在節點中一樣進行查詢

export async function getStaticPaths() {
      const get = await fetch("url")
      const data = await get.json()
      
      data.map(item => console.log(item))
     
      const paths = data.map((post) => {
        return { params: {id: post.id.toString()} }
      });
    
      // const paths = { params: {id: '1' } }
        
      return {
        paths,
        fallback: false
     
      }
     
    }