使用React從關鍵API向表中插入值

使用 react js 插入表值時遇到問題。所以，我有這樣的 API 形式： const data = [ { tahun: 2015, tindakan_igd: { APS: [2000], Dirawat: [2000], Dirujuk_Luar: [2000], Dirujuk_Poli: [2000], Meninggal_DOA: [2000] , Meninggal_IGD: [2000], 普朗: [2000] } } ];

我想將 [APS, Dirawat, Dirujuk_Luar, Dirujuk_Poli, Meninggal_DOA, Meninggal_IGD, Pulang] 放到第一列。然后，我想把 [2000,2000,2000,2000,2000,2000,2000] 放到第二列。

這是我的 React.js 代碼：

 import React, { useEffect, useState } from "react";
// import BreadCrumb from "../ui/components/BreadCrumb";
// import CircularLoader from "../ui/components/Spinner/CircularLoader";
// import DetailHeader from "../ui/components/Headers/DetailHeader";
import { useLocation, useParams } from "react-router-dom";
// import Error404 from "../ui/components/Error404";
// import RegularDropDown from "../ui/components/Dropdown/RegularDropdown";

const DetailPemasukan = () => {
  const location = useLocation();
  // const { labels, crumb, title } = location.state ?? "";
  // const [isLoading, setIsLoading] = useState(true);
  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.map((val, key) => {
          return (
            <tr key={key}>
              <td>{val.tindakan_igd.keys}</td>
              <td>{val.tindakan_igd.values}</td>
            </tr>
          )
        })}
      </table>
    </div>
  );
}
  
export default DetailPemasukan;

問題一直在 data.map 上，直到 val.tindakan_igd.values。我不知道如何在 React 中解決它

uj5u.com熱心網友回復：

tindakan_igd您需要像這樣在映射期間迭代鍵

      {data.map((val, key) => {
        return Object.keys(val.tindakan_igd).map((keyName) => {
          return (
            <tr key={`${keyName}-${key}`}>
              <td>{keyName}</td>
              <td>{val.tindakan_igd[keyName]}</td>
            </tr>
          )
        })
      })}

uj5u.com熱心網友回復：

你可以按照這個：

const data = [
  {
    tahun: 2015,
    tindakan_igd: {
      APS: [2000],
      Dirawat: [2000],
      Dirujuk_Luar: [2000],
      Dirujuk_Poli: [2000],
      Meninggal_DOA: [2000],
      Meninggal_IGD: [2000],
      Pulang: [2000]
    }
  }
];

Object.entries(data[0].tindakan_igd).map(item => {
  console.log(item[0], item[1][0]);
})

uj5u.com熱心網友回復：

你可以使用 Object.entries https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

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 result = data.map((item, index) => {
          return Object.entries(item.tindakan_igd).map(([key, value]) => {
          return (
          <tr key={index.toString()   key}>
              <td>{key}</td>
              <td>{value[0]}</td>
            </tr>
          )
          })
        })

標籤：javascript 反应

上一篇：如何在范圍外共享動態加載的類

下一篇：將具有相同鍵值的物件移動到陣列中-JavaScript