Next.js & googleapi：没有键的数组数组

Question

我是 next.js 的新手，在getStaticProps函数中，我将 googlesheet 表加载到常量中。 结果是一个数组数组，这里是googleapi返回的一个例子：

[
   [
      "CLIENT A",
      "MIKE",
      "UNKNOWN",
      "TRADICIONAL"
   ],
   [
      "CLIENT B",
      "MARY",
      "UNKNOWN",
      "MOROSO"
   ],
   [
      "CLIENT C",
      "MIKE",
      "CLIENT C S.A DE C.V.",
      "TRADICIONAL"
   ],
   [
      "CLIENT D",
      "JOHN",
      "RAZON SOCIAL CLIENT",
      "TRADICIONAL"
   ]
]

我将此数组作为道具返回，但我找不到操纵信息的方法，因此我可以将其显示为：

客户A
销售员：MIKE
Razón Social：未知
类别：传统

--------------------
客户乙
销售员：玛丽
Razón Social：未知
类别：MOROSO

--------------------
客户C
销售员：MIKE
Razón Social：CLIENT C SA DE CV
类别：MOROSO

我试图找到一种向数组添加键的方法，但我找不到如何去做，并且有类似的东西：

 { client: "CLIENT A", salesperson: "MIKE", razonsocial: "UNKNOWN", category: "TRADICIONAL", }

我还尝试映射数组数组，但收到一条错误消息，指出我无法映射它。

有人可以帮我建议我如何处理数组的最佳方法吗？

Answer 1

这是你追求的吗？

 const data = [ ["CLIENT A", "MIKE", "UNKNOWN", "TRADICIONAL"], ["CLIENT B", "MARY", "UNKNOWN", "MOROSO"], ["CLIENT C", "MIKE", "CLIENT C SA DE CV", "TRADICIONAL"], ["CLIENT D", "JOHN", "RAZON SOCIAL CLIENT", "TRADICIONAL"] ]; const keys = ['', 'Salesperson', 'Razón Social', 'Category']; data.map(d => { d.forEach((e, i) => { console.log(`${keys[i]?keys[i]+": ":''}${e}`) }) console.log('------------------'); })

Answer 2

不完全是，我想要做的是让数据数组作为道具返回到我的默认函数。 问题是我无法映射 renglon 对象，也无法向 renglon 对象添加键。 这是我在函数 home 中的代码，client.name 不起作用，因为无法创建密钥，也无法使用 client[0]。

 import { google } from 'googleapis'; export async function getStaticProps() { const auth = await google.auth.getClient({ scopes: ['https://www.googleapis.com/auth/spreadsheets.readonly'] }); const sheets = google.sheets({ version: 'v4', auth }); const range = `Sheet!A$2:D`; const response = await sheets.spreadsheets.values.get({ spreadsheetId: process.env.SHEET_ID, range, }); // I want to add keys to renglon, but can't find how const renglon = response.data.values; if (renglon.length) { return { props: { renglon, } }; } } export default function Home( { renglon } ) { return ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {renglon.map((client) => { return ( <li>Client: {client.name}</li> //Can't create this key or use client[0] Sales person: {client.salesperson}<br />//Can't create this key or use client[1] Razón Social: {client.razonsocial}<br />//Can't create this key or use client[2] Category: {client.category}<br /> //Can't create this key or use client[3] ) })} </div> ); }