时间戳

首页 > 解决方案 > 迭代表行中的数据

javascript - 迭代表行中的数据

问题描述

我有数据表，我必须在表的行中显示信息。在 userDetails 中，它包含有关用户的信息。我的问题是，当我迭代 tableData 时，我在所有行中获取所有信息，而不是在 1 行中获取 1 个数据。下面是响应结构：

[
    {
        "info": "Ron",
        "address": "NY",
        "id": "2113",
        "date": "2015-10-10",
    },
    {
        "info": "Mark",
        "address": "mt@ibm.com",
        "id": "3323",
        "date": "2019-01-10",
    },
]
const tableData = (
    <>
    <div>User Info </div>
      {userDetails.map((data) => (
        <>   
          <div>
            {data.info}
          </div>
        </>
      ))}
    </>
  );

表中有 2 行，我希望第一行中的信息为“ Ron” ，第二行中为“Mark”。我在迭代 tableData 时得到的是第一行的 Ron, Mark 和第二行的 Ron, Mark。我很确定我以错误的方式迭代 tableData，但找不到正确的方法。谁能帮我这个。

标签： javascriptreactjstypescriptdatatable

解决方案

@Singh - 你似乎做对了。table如果您正在寻找基于行和列的布局，我唯一的建议是使用标签。

<table>
    <thead>
      <th>User Info</th>
    </thead>
    <tbody>
        {userDetails.map((userDetail) => (
             return (<tr>
               <td> {userDetail.info} </td>
             </tr>);
        )}
    </tbody>
</table>

标签<tr>将是map函数内部返回的重复项。

推荐阅读