Next.js中无法渲染Strapi文章数据的问题求助

嘿，我看你遇到的问题是在Next.js里从Strapi获取文章数据后，没法正常访问attributes属性对吧？先别着急，咱们一步步来排查和解决~

首先看你打印出来的数据结构：

{
  data: [ { id: 1, attributes: [Object] } ],
  meta: { pagination: { page: 1, pageSize: 25, pageCount: 1, total: 1 } }
}

这里能发现核心问题：你拿到的articles是一个包含data数组和meta信息的完整响应对象，但你在组件里直接把它当成数组来遍历了，自然没法正确访问到attributes。

接下来咱们逐个文件调整：

1. 修正articles.js的数据传递逻辑 #

在getStaticProps里，你需要把响应对象里的data数组单独提取出来，再传递给组件：

// articles.js
import Layout from '../components/Layout'
import ArticleListItems from '../components/ArticleListItems'
import { fetcher } from '../lib/api'

const ArticlesList = ({ articles }) => {
  return (
    <Layout>
      <ArticleListItems articles={ articles }/>
    </Layout>
  )
}

export async function getStaticProps() {
  // 拿到包含data和meta的完整响应
  const strapiResponse = await fetcher('articles')
  // 只把文章数据数组传递给组件
  return {
    props: {
      articles: strapiResponse.data
    }
  }
}

export default ArticlesList

2. 修复api.js里的小bug #

你的fetcher函数里有个未定义变量的问题，当没有options时用到了params但没声明，咱们把这个逻辑理通顺：

// api.js
const baseUrl = process.env.NEXT_PUBLIC_STRAPI_URL

async function fetcher(path, options = {}) {
  let url = `${baseUrl}/${path}`
  // 如果需要传参数，统一用URLSearchParams拼接
  if (options.params) {
    const searchParams = new URLSearchParams(options.params)
    url += `?${searchParams.toString()}`
  }
  console.log(url)
  
  const response = await fetch(url)
  // 先判断请求是否成功，避免后续解析错误
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`)
  }
  const data = await response.json()
  console.log(data)
  return data;
}

export { baseUrl, fetcher }

3. 优化ArticleListItems.jsx的渲染安全 #

现在传递过去的articles是正确的数组了，为了防止意外的undefined报错，可以加个可选链操作符：

// ArticleListItems.jsx
const ArticlesListItems = ({ articles }) => {
  // 可以用格式化打印看清楚数据结构
  console.log(JSON.stringify(articles, null, 2))
  return (
    <div className="bg-white">
      {articles && articles.length > 0
        ? articles.map((article) => (
          <li key={article.id}>
            <h1 className="text-sm text-gray-700">{article.attributes?.title}</h1>
          </li>
        ))
        : "no articles"}
    </div>
  )
}

export default ArticlesListItems

另外你之前看到的data : [object Object]是因为直接打印对象时的默认显示，用JSON.stringify格式化打印就能看清完整结构啦～

备注：内容来源于stack exchange，提问作者Camille