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，名字，姓氏，电子邮件。

问题是我如何在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

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

2 个答案: