React + google sheets api，如何访问数据和显示我的结果

Question

我正在构建一个 React 应用程序，它可以读取我的 Google 表格文件并向我显示我的数据。

但是每当我从我的工作表中导入数据时，它都会进入一个我无法访问和获取数据的数组。

我想显示credenciados中的数据，如下图所示

这是我当前的代码。

    import React, { useState } from "react";
    import useGoogleSheets from 'use-google-sheets';

    const App = () => {
    const { data, loading, error } = useGoogleSheets({
    apiKey: 'mykey',
    sheetId: 'myid',
    sheetsOptions: [{ id: 'credenciados' }]
     });

     const sheetData = Array.from(data);
     console.log(sheetData);
     return (
       <ul>
         {sheetData.map((data) => (
        <li key={data.id}>
          {data.id} {data.razao}
        </li>
      ))}
       </ul>
      );
      };
     export default App;    

这是我经过数小时的尝试得到的最终结果。 我已经阅读了 google sheets 文档，react 文档，但没有找到解决方案

Answer 1

尝试：

{sheetData.data.map((data) => (
    <li key={data.id}>
      {data.id} {data.razao}
    </li>
  ))}

Answer 2

我需要访问你的数据以便更好地帮助你，但是，似乎正在发生的事情是

似乎sheetData是一个包含键data的对象数组，这意味着您应该首先获取数据键（您正在调用数据的解构 object 不一样）

{sheetData.map((el) => (
  <li key={el.data.id}>
    {el.data.id} {el.data.razao}
  </li>
))}

另一种选择是解构数据元素：

{sheetData.map(({ data }) => (
  <li key={data.id}>
    {data.id} {data.razao}
  </li>
))}