用数组数据的javascript数组填充html表？

Question

我想用 array of array 数据格式填充 html 表。我已经编写了代码，但我的数据显示在单行中。我已经在嵌套循环中映射数据。所以我无法正确实施。请提出解决方案。

我的代码：

import React from "react";
import "./App.css";


const data = {
  headers: ['Name', 'Country', 'City', 'Mobile', 'Salary', 'Date', 'PAN'],

  rows: [
    ['Maxwell', 'Australia', 'Sydney', '123', '$22', '02/02/89', 'yes'],
    ['Mark', 'Canada', 'Toronto', '056', '$8965', '12/06/02', 'no'],
    ['David', 'United Kingdom', 'London', '242', 'S23', '25/02/20', ''],
    ['Kohli', 'India', 'Delhi', '8956', '$32', '04/12/21', 'yes'],
    ['ABD', 'RSA', 'captown', '4515', '$32', '2/11/08', null],
  ],
};
const App = ({ states = {} }) => {
 
 
  return (
    <div>
<table style={{width:"100%"}}>
  <tr>
    {
      data.headers.map((head,i)=>(
        <th>{head}</th>
      ))
    }
   
  </tr>

{
  data.rows.map((row,j)=>(

    row.map((val)=>(
      <tr>
      <td>{val}</td>
     
  </tr>
    ))
  ))
}
</table>
    </div>
  );
};

export default App;

Answer 1

您需要将 <tr> 元素移到内部 .map() 调用之外，以便为每个内部数组创建一个 <tr>，并为该数组的每个元素创建一个 <td>。

{
  data.rows.map((row, j) => (
    <tr>
      {row.map((val) => (
        <td>{val}</td>
      ))}
    </tr>
  ))
}

const data = {
  headers: ['Name', 'Country', 'City', 'Mobile', 'Salary', 'Date', 'PAN'],
  rows: [
    ['Maxwell', 'Australia', 'Sydney', '123', '$22', '02/02/89', 'yes'],
    ['Mark', 'Canada', 'Toronto', '056', '$8965', '12/06/02', 'no'],
    ['David', 'United Kingdom', 'London', '242', 'S23', '25/02/20', ''],
    ['Kohli', 'India', 'Delhi', '8956', '$32', '04/12/21', 'yes'],
    ['ABD', 'RSA', 'captown', '4515', '$32', '2/11/08', null],
  ],
};
const App = ({ states = {} }) => {

  return (
    <div>
      <table style={{ width: "100%" }}>
        <tr>
          {
            data.headers.map((head, i) => (
              <th>{head}</th>
            ))
          }
        </tr>
        {
          data.rows.map((row, j) => (
            <tr>
              {row.map((val) => (
                <td>{val}</td>
              ))}
            </tr>
          ))
        }
      </table>
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

只需返回外部.map 中的<tr> 和内部.map 中的<td>：

{data.rows.map((row) => (
    <tr>
     {row.map((val) => <td>{val}</td>}
    </tr>
))}

这样您将为父数组的每个条目循环内部数组的值。