React中如何从API数据生成指定结构的表格？

你的问题出在直接访问对象的keys和values属性——JavaScript对象本身没有这两个内置属性，需要用Object.keys()和Object.values()方法来提取对象的键和值。另外，你的数据中每个值都是数组（比如APS: [2000]），渲染时需要取出数组的第一个元素。

修正后的代码 #

import React from "react";
import { useLocation } from "react-router-dom";

const DetailPemasukan = () => {
  const location = useLocation();
  const data = [
    {
      tahun: 2015,
      tindakan_igd: {
        APS: [2000],
        Dirawat: [2000],
        Dirujuk_Luar: [2000],
        Dirujuk_Poli: [2000],
        Meninggal_DOA: [2000],
        Meninggal_IGD: [2000],
        Pulang: [2000]
      }
    }
  ];

  const headers = [
    "Tindakan",
    "Total Pemasukan"
  ];
  
  return (
    <div className="detail__table">
      <table>
        <tr>
          {headers.map((item, index) => (
            <th key={index}>{item}</th>
          ))}
        </tr>
        {/* 遍历data中的每个对象 */}
        {data.map((dataItem, dataKey) => {
          // 提取tindakan_igd的键和值数组
          const tindakanKeys = Object.keys(dataItem.tindakan_igd);
          const tindakanValues = Object.values(dataItem.tindakan_igd);
          
          // 遍历键值对生成表格行
          return tindakanKeys.map((key, index) => (
            <tr key={`${dataKey}-${index}`}>
              <td>{key}</td>
              {/* 取出数组中的第一个元素 */}
              <td>{tindakanValues[index][0]}</td>
            </tr>
          ));
        })}
      </table>
    </div>
  );
};
  
export default DetailPemasukan;

关键修正点 #

• 用Object.keys(dataItem.tindakan_igd)获取所有操作名称（APS、Dirawat等），作为表格第一列内容。
• 用Object.values(dataItem.tindakan_igd)获取对应的值数组，通过[index][0]取出数组中的数字，作为第二列内容。
• 给表格行设置唯一的key（组合data的key和遍历的index），避免React渲染警告。

内容的提问来源于stack exchange，提问作者veronica novianti