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

Question

const table_body = [
  {
    id: "1",
    first_name: "Test",
    last_name: "Again",
    email: "test@gmail.com",
  },
  {
    id: "2",
    first_name: "Joe",
    last_name: "Bidal",
    email: "jb@gmail.com",
  }
]          

这是我的对象数组。

<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