Javascript 如何在React Js中在一个表中显示来自两个独立数组的数据？_Javascript_Arrays_Reactjs_Html Table

Javascript 如何在React Js中在一个表中显示来自两个独立数组的数据？

javascript arrays reactjs

Javascript 如何在React Js中在一个表中显示来自两个独立数组的数据？,javascript,arrays,reactjs,html-table,Javascript,Arrays,Reactjs,Html Table,在我的项目中，我需要在一个表中显示来自2个独立数组的数据，并且我需要使我的代码响应，我的代码： import "./styles.css"; export default function App() { const data = [ { v: "car" }, { v: "model" }, { v: "accident" }

在我的项目中，我需要在一个表中显示来自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>
  );
}

但我需要的结果是：

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>
          ))}

{info.map（（d）=>(
{d.year}
{d.model}
{d.事故}
{d.owner}
))}

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

是否有任何方法可以实际组合来自2个数组的数据，并在不指定它们的情况下映射所有值？非常感谢任何建议和帮助。

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


{/* 
{data.map（（d，i）=>(
{d.v}
))}
*/}
{info.map（（条目，i）=>(
{data.map（（d，i）=>(
{条目[d.v]&&(
{d.v}:
{条目[d.v]}
)}
))}
))}

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


{/* 
{data.map（（d，i）=>(
{d.v}
))}
*/}
{info.map（（条目，i）=>(
{data.map（（d，i）=>(
{条目[d.v]&&(
{d.v}:
{条目[d.v]}
)}
))}
))}

这只是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>
  );
}

导入“/styles.css”；导出默认函数App（）{ 常数数据=[ { v：“汽车” }, { 五：“模型” }, { 五：“事故” }, { v：“所有者” } ]; 常数信息=[ { 年份：“2010年”，型号：“bmv”，事故：“2019年”，所有者：“J.S” }, { 年份：“2012年”，型号：“bmv”，事故：“不适用”，业主：“D.W” }, { 年份：“2014年”，型号：“bmv”，事故：“2016年”，业主：“J.B” } ]; 返回( {data？.map（（d，i）=>( {d.v} ))} {info.map（（d，i）=>( {d.year} {d.model} {d.事故} {d.owner} ))} ); }

这只是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>
  );
}

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

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

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

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

返回(
{data？.map（（值）=>(
{value.v}
{info.map（（信息值）=>(
{value.v===“汽车”？信息值。年份：信息值[value.v]}
))}
))}
);

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

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

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

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

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

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

返回(
{data？.map（（值）=>(
{value.v}
{info.map（（信息值）=>(
{value.v===“汽车”？信息值。年份：信息值[value.v]}
))}
))}
);

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

谢谢你的代码，它可以工作，但我