Next.js调用Google Sheets API返回无键二维数组 如何转对象格式化展示

1. getStaticProps 侧数据预处理 #

你遇到的map报错大概率是没有做数据合法性校验，或者调用Google API时没有取到正确层级的数组返回值，参考如下代码处理原始二维数组：

export async function getStaticProps() {
  // 替换为你实际调用Google Sheets API的逻辑
  const googleRes = await fetch('你的Google API请求地址')
  const apiData = await googleRes.json()
  // Google Sheets API v4 行数据默认存放在values字段下，注意不要直接拿apiData去遍历
  const rawData = apiData.values || []

  // 转换为带键名的结构化对象数组
  const clientList = rawData
    // 过滤空行、字段不全的异常数据
    .filter(row => Array.isArray(row) && row.length >= 4)
    .map(row => ({
      client: row[0],
      salesperson: row[1],
      razonsocial: row[2],
      category: row[3]
    }))

  return {
    props: {
      clientList
    }
  }
}

2. 页面组件渲染 #

直接遍历处理好的clientList即可实现你要的展示效果：

export default function ClientPage({ clientList }) {
  if (!clientList.length) return <div>暂无客户数据</div>

  return (
    <div>
      {clientList.map((item, idx) => (
        <div key={idx}>
          <div>{item.client}</div>
          <div>Salesperson: {item.salesperson}</div>
          <div>Razón Social: {item.razonsocial}</div>
          <div>Category: {item.category}</div>
          {/* 最后一条数据不展示分割线可加判断逻辑 */}
          {idx !== clientList.length - 1 && <hr />}
        </div>
      ))}
    </div>
  )
}

<hr>标签默认样式就是你需要的水平分割线，你也可以自定义样式调整分隔符样式。

内容的提问来源于stack exchange，提问作者Alejandro Chavero