在React JSX中使用.map返回所有内容而不是第一个关键项

Question

const table_body = [
  {
    id: "1",
    first_name: "Test",
    last_name: "Again",
    email: "[email protected]",
  },
  {
    id: "2",
    first_name: "Joe",
    last_name: "Bidal",
    email: "[email protected]",
  }
]          

这是我的对象数组。

<tbody className="lh-copy">
    <tr className="stripe-dark">
      {Object.values(this.props.table_body).map((item, i) => {
      for (const item of Object.values(item)) {
        return (
            console.log(item)
            // <td key={i} className="pa3">{item}</td>

        }
      })}
    </tr>
</tbody>

我有一个表组件，我根据对象数组动态返回表的值。我想用动态数据制作一个动态表。

我不想使用多个<td>标签，因为我希望用户能够添加更多输入，而对象的内容不仅仅是id，first_name，last_name和email，它可能更多{item.id} .. .....对我的案子不起作用。

当我读取返回的console.log时，它只显示1和2，即id号。如果我删除return()，它将显示id，first_name，last_name，email。

问题是我如何在console.log中测试或在td标签中返回所有内容？我尝试在return（）中使用for循环，但它显然不起作用。

更新：这是我的工作代码部分，感谢@kind_user

    {table_body.map((item, i) => {
      return (
        <tr key={i} className="stripe-dark">
          {Object.keys(item).map((element, j) => {
            return(
              <td key={j} className="pa3">{element}</td>
            )
          })}
        </tr>
      )
    })}

Answer 1

• return关键字在第一个循环后打破循环，这就是为什么你只得到第一个元素。
• table_body是一个阵列。 Object.values功能是多余的。
• 你把<tr />放在了错误的地方。

建议的方法：

{table_body.map((item, i) => (
   <tr className="stripe-dark" key={i}>
      {Object.values(item).map((elem) => <td className="pa3">{elem}</td>)}
   </tr>
)}

Answer 2

通过数组映射将分别为您提供每个对象。

  <tbody className="lh-copy">
    {table_body.map((item, index) => (
      <tr className="stripe-dark" key={index}>
        <td className="pa3">{item.id}</td>
        <td className="pa3">{item.email}</td>
      </tr>
    ))}
  </tbody>

沙箱：https://codesandbox.io/s/kor9lwvn87