如何在 React Js 的一个表中显示来自 2 个单独数组的数据？

Question

在我的项目中，我需要在一个表中显示来自 2 个单独数组的数据，并且我需要让我的代码具有响应性，我的代码：

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    { 
      year: "2012", 
      model: "bmv", 
      accident: "n/a", 
      owner: "D.W" },
    { 
      year: "2014", 
      model: "bmv", 
      accident: "2016", 
      owner: "J.B" 
    }
  ];
  return (
    <div className="App">
      <table>
        <tr>
          {data?.map((d, i) => (
            <td>{d.v}</td>
          ))}

          {info.map((d) => (
            <>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </>
          ))}
        </tr>
      </table>
    </div>
  );
}

codeSandbox

我正在映射两个数组，结果显示如下：

car model   accident    owner   2010    bmv 2019    J.S 2012    bmv n/a D.W 2014    bmv 2016    J.B

但我需要的结果是：

car  2010           2012       2014

model bmv            bmv       bmv

accident 2019        n/a        2016

owner J.S            D.W      J.B

另一个问题是我不想在

中指定 {d.year} 或 {d.model

{info.map((d) => (
            <td>{d.year}</td>
            <td>{d.model}</td>
            <td>{d.accident}</td>
             <td>{d.owner}</td>
          ))}

因为当/如果添加新值（如 lastOwner），除非我指定 {d.lastOwner}，否则它不会显示

有没有什么方法可以实际组合来自 2 个数组的数据，并且只映射所有值而不指定它们？非常感谢任何建议和帮助。

Answer 1

您可以使用数据数组来遍历每个信息条目的属性。

https://codesandbox.io/s/zealous-thunder-zoeqp?file=/src/App.js

<table>
        {/* <tr>
          {data.map((d, i) => (
            <th>{d.v}</th>
          ))}
        </tr> */}
        {info.map((entry, i) => (
          <tr>
            {data.map((d, i) => (
              <>
                {entry[d.v] && (
                  <td>
                    <strong>{d.v} :</strong>
                    {entry[d.v]}
                  </td>
                )}
              </>
            ))}
          </tr>
        ))}
      </table>

Answer 2

我不确定你不想显示 d.year 和 d.model 是什么意思。 但是要回答您关于如何基本上转置表格的问题，您可以使用以下内容：

您基本上使用数据表中的值来打印属于它的信息表中的值。因此，如果您向其添加更多数据，它仍应打印此内容。

我使用条件语句，因为汽车和年份不同（这可能与我不理解的您的信息有关）。所以如果是汽车，那么它应该打印出年份。

return (
<div className="App">
  <table>
    {data?.map((value) => (
      <tr>
        <th>{value.v}</th>
        {info.map((info_value) => (
          <>
            <td>
              {value.v === "car" ? info_value.year : info_value[value.v]}
            </td>
          </>
        ))}
      </tr>
    ))}
    <tr></tr>
  </table>
 </div>
);

由于我不确定您如何将数据添加到表格中，或者除了您在问题中显示的内容之外，您究竟想要打印什么，我不确定这是否正是您要查找的内容。但它应该打印出以下内容：

car      2010  2012 2014
model    bmv   bmv  bmv
accident 2019  n/a  2016
owner    J.S   D.W  J.B

Answer 3

这只是 html 表中的一个问题，我放置了内联样式以适合您的 ui 规范，但您可以在 css 样式表中添加此样式：

import "./styles.css";

export default function App() {
  const data = [
    {
      v: "car"
    },
    {
      v: "model"
    },
    {
      v: "accident"
    },
    {
      v: "owner"
    }
  ];

  const info = [
    {
      year: "2010",
      model: "bmv",
      accident: "2019",
      owner: "J.S"
    },
    {
      year: "2012",
      model: "bmv",
      accident: "n/a",
      owner: "D.W"
    },
    {
      year: "2014",
      model: "bmv",
      accident: "2016",
      owner: "J.B"
    }
  ];
  return (
    <div className="App">
      <table style={{ display: "flex" }}>
        <thead style={{ display: "flex", flexDirection: "column" }}>
          <tr style={{display:"flex", flexDirection:"column", margin:"5px"}}>
            {data?.map((d, i) => (
              <th key={i}>{d.v}</th>
            ))}
          </tr>
        </thead>
        <tbody style={{ display:"flex"}}>
          {info.map((d, i) => (
            <tr key={i} style={{display:"flex", flexDirection:"column", margin:"5px"}}>
              <td>{d.year}</td>
              <td>{d.model}</td>
              <td>{d.accident}</td>
              <td>{d.owner}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}