javascript - 在 JSON 中为 React 表读取复杂表时需要帮助

Question

预期输出//JSON

    "servers": [
        {
            "name": "virtztp01-os1-cntl2",
            "ipv4Address": "10.189.147.70",
            "ipv6Address": "2000:::00",
            "tcpPorts": [
                22
            ],
            "udpPorts": [
                53
            ],
            "isAlive": "True", 
     "portstatus" {
       "tcpPorts": [
                    {
                        "portNumber": 22,
                        "isAlive": "True"
                    },
                      {
                        "portNumber": 122,
                        "isAlive": "False"
                    }, {
                        "portNumber": 322,
                        "isAlive": "True"
                    }
                ],
                "udpPorts": [
                    {
                        "portNumber": 53,
                        "isAlive": "False"
                    },
                      {
                        "portNumber": 153,
                        "isAlive": "True"
                    },
                        {
                        "portNumber": 253,
                        "isAlive": "False"
                    }

                    }
                ]
            }
        }
    ]
}

我能够读取数据直到这里

      "servers": [
        {
            "name": "virtztp01-os1-cntl2",
            "ipv4Address": "10.189.147.70",
            "ipv6Address": "2000:::00",
            "tcpPorts": [
                22
            ],
            "udpPorts": [
                53
            ],
            "isAlive": "True",[enter image description here][1]

Json 的下一部分有多个数组，我无法读取反应表中的数据以下是 json 的其余部分

       "portStatus": {
                "tcpPorts": [
                    {
                        "portNumber": 22,
                        "isAlive": "True"
                    },
                      {
                        "portNumber": 122,
                        "isAlive": "False"
                    }, {
                        "portNumber": 322,
                        "isAlive": "True"
                    }
                ],
                "udpPorts": [
                    {
                        "portNumber": 53,
                        "isAlive": "False"
                    },
                      {
                        "portNumber": 153,
                        "isAlive": "True"
                    },
                        {
                        "portNumber": 253,
                        "isAlive": "False"
                    }

                    }

在此处需要帮助 React Tables 想要阅读上面的内容并显示反应表中相应第一部分的所有上述数组。

标签： javascriptreactjsreact-nativenpmreact-router

Answer 1

在react-table迭代嵌套数据时，您需要使用row.original.portstatus.tcpPorts. 例子：

import React from "react";
import { render } from "react-dom";
import ReactTable from "react-table";
import "react-table/react-table.css";

const columns = [
  {
    Header: "Name",
    accessor: "name"
  },
  {
    Header: "Ipv4Address",
    accessor: "ipv4Address"
  },
  {
    Header: "Ipv6Address",
    accessor: "ipv6Address"
  },
  {
    Header: "isAlive",
    accessor: "isAlive",
    Cell: (row) => {
      row.styles["color"] = "#fff";
      row.styles["backgroundColor"] = row.value === "True" ? "green" : "red";
      return row.value.toUpperCase();
    }
  }
];

const subTableColumns = [
  {
    Header: "Port Number",
    accessor: "portNumber"
  },
  {
    Header: "Is Alive",
    accessor: "isAlive"
  }
];

const subComponent = (row) => {
  return (
    <div>
      <div>TCP Ports</div>
      <ReactTable
        data={row.original.portstatus.tcpPorts}
        columns={subTableColumns}
        defaultPageSize={3}
        showPagination={false}
      />
      <br />
      <div>UDP Ports</div>
      <ReactTable
        data={row.original.portstatus.udpPorts}
        columns={subTableColumns}
        defaultPageSize={3}
        showPagination={false}
      />
    </div>
  );
};

const demoData = [
  {
    name: "virtztp01-os1-cntl2",
    ipv4Address: "10.189.147.70",
    ipv6Address: "2000:::00",
    tcpPorts: [22],
    udpPorts: [53],
    isAlive: "True",
    portstatus: {
      tcpPorts: [
        {
          portNumber: 22,
          isAlive: "True"
        },
        {
          portNumber: 122,
          isAlive: "False"
        },
        {
          portNumber: 322,
          isAlive: "True"
        }
      ],
      udpPorts: [
        {
          portNumber: 53,
          isAlive: "False"
        },
        {
          portNumber: 153,
          isAlive: "True"
        },
        {
          portNumber: 253,
          isAlive: "False"
        }
      ]
    }
  },
  {
    name: "virtztp01-os1-cntl2",
    ipv4Address: "10.189.147.70",
    ipv6Address: "2000:::00",
    tcpPorts: [22],
    udpPorts: [53],
    isAlive: "True",
    portstatus: {
      tcpPorts: [
        {
          portNumber: 22,
          isAlive: "True"
        }
      ],
      udpPorts: [
        {
          portNumber: 53,
          isAlive: "False"
        }
      ]
    }
  }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      expanded: {}
    };
  }
  render() {
    return (
      <div>
        <ReactTable
          data={demoData}
          columns={columns}
          defaultPageSize={10}
          expanded={this.state.expanded}
          className="-striped -highlight"
          getTrProps={(state, rowInfo, column, instance, expanded) => {
            return {
              onClick: (e) => {
                // this.setState({ expanded: {} });
                this.setState({
                  expanded: "{'" + rowInfo.viewIndex + "':'true'}"
                });
              }
            };
          }}
          SubComponent={subComponent}
        />
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));