Question

我有一个嵌套的JSON，我正在尝试将其呈现到表中。这个想法是通过遍历JSON来填充的。我的问题是当我遍历标签并尝试在环境列中进行填充时。如果该键存在，它可以正常工作，但是如果该键不存在，它将TD移到前几列。

例如，在图像的下方，您可以在第一行中看到 web 到ENV列，而不是目的列。对于其他两个表，由于键存在，因此表呈现良好。

import React, { Component } from "react";
import { Table } from "reactstrap";
class Example extends Component {
  state = {
    data: [
      {
        id: "1",
        States: "many",
        Purpose: "web",
        Tags: [
          {
            Key: "Name",
            Value: "server1"
          }
        ]
      },
      {
        id: "2",
        States: "Single",
        Purpose: "App",
        Tags: [
          {
            Key: "Name",
            Value: "server2"
          },
          {
            Key: "env",
            Value: "qa"
          }
        ]
      },
      {
        id: "3",
        States: "None",
        Purpose: "DB",
        Tags: [
          {
            Key: "env",
            Value: "qa"
          },
          {
            Key: "Name",
            Value: "server3"
          }
        ]
      }
    ]
  };
  render() {
    let envs;
    return (
      <Table className="align-items-center table-flush" responsive>
        <thead className="thead-light">
          <tr>
            <th scope="col">ID</th>
            <th scope="col">States</th>
            <th scope="col">Env</th>
            <th scope="col">Purpose</th>
          </tr>
        </thead>
        <tbody>
          {this.state.data.map(info => (
            <tr>
              <th scope="row">{info.id}</th>
              <td>{info.States}</td>
              {info.Tags.filter(env => env.Key === "env").map(e => (
                <td>{e.Value}</td>
              ))}
              <td>{info.Purpose}</td>
            </tr>
          ))}
        </tbody>
      </Table>
    );
  }
}

export default Example;

Answer 1

在渲染方法中，您可以执行以下操作：

<td>{info.Tags.filter(env => env.Key === "env").map(e => e.Value).join(' ')}</td>

因此，您不必将整个返回的值包装在td中，而必须将整个包装在标签中。

使用嵌套的JSON数据呈现React表

1 个答案: