迭代表行中的数据答案

【问题标题】：Iterate data in table rows迭代表行中的数据
【发布时间】：2020-08-04 04:54:31
【问题描述】：

我有一个数据表，我必须在表的行中显示信息。在 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，但找不到正确的方法。谁能帮我解决这个问题。

【问题讨论】：

您希望输出到底是什么样的？请记住将您想要为每一行重复的所有内容放入 map() 回调中。
我得到了所有行中的所有响应，而不是我希望在每一行中获取 1 个响应
请包括您如何获取回复 - 这听起来对这个问题非常重要。
“信息”表中有一个列。我在信息表中迭代我的 tableData(sn-p added in the question)。我在所有行中都获取了“Ron”和“Mark”（检查附加在行中的响应），而不是我希望获取第一行中的“Ron”和第二行中的“Mark”
@Singh 您需要向我们展示您正在使用的组件。没有足够的信息进行调试。

标签： javascript reactjs typescript datatable

【解决方案1】：

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

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

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

【讨论】：