Question

我有一个JSON数据文件，我必须提取一些信息并使用react js显示它。我被困在显示数组的元素中。

这是我的data.js文件

const details = [
  {
    environment: "prod",
    account_number: "057346956084",
    regions: [
      {
        region_one: "10.0.0.0/24"
      }
    ],
    bu: "CIO and Central Tech",
    account_alias: "tr-novus-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "749444856751",
    regions: [
      {
        region_one: "172.31.0.0/16",
        region_three: "172.30.0.0/16"
      }
    ],
    bu: "CIO and Central Tech",
    account_alias: "tr-gcs-normalization-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "238963201434",
    regions: [
      {
        region_one: "10.37.128.0/20",
        region_three: "10.37.144.0/20"
      }
    ],
    bu: "dcis",
    account_alias: "tr-tax-cp-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "209911870440",
    regions: [
      {
        region_one: "10.150.8.0/21",
        region_three: "10.168.0.0/21"
      }
    ],
    bu: "tax",
    account_alias: "tr-learning-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "933497097166",
    regions: [
      {
        region_six: "10.39.176.0/22",
        region_one: "10.39.160.0/21",
        region_three: "10.39.168.0/21",
        region_four: "10.39.124.0/22"
      }
    ],
    bu: "Corporates",
    account_alias: "tr-integrationpoint-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "777737700635",
    regions: [
      {
        region_nine: "10.152.158.0/24",
        region_ten: "10.97.207.0/24",
        region_one: "10.97.203.0/24",
        region_five: "10.97.205.0/24",
        region_four: "10.97.206.0/24",
        region_three: "10.97.204.0/24"
      }
    ],
    bu: "dcis",
    account_alias: "tr-isrm-ad-prod",
    resource_name: "account_info"
  },
  {
    environment: "nonprod",
    account_number: "586447969888",
    regions: [
      {
        region_one: "10.226.208.0/21",
        region_three: "10.39.8.0/21"
      }
    ],
    bu: "CIO and Central Tech",
    account_alias: "tr-content-console-preprod",
    resource_name: "account_info"
  },  {
    environment: "nonprod",
    account_number: "755189330144",
    regions: [{}],
    bu: "CIO and Central Tech",
    account_alias: "tr-quicksight-preprod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "460300312212",
    regions: [
      {
        region_one: "10.152.140.0/22",
        region_four: "10.152.136.0/22"
      }
    ],
    bu: "dcis",
    account_alias: "tr-enterprise-cicd-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "470717676343",
    regions: [{}],
    bu: "CIO and Central Tech",
    account_alias: "tr-wellarchitected-tool-prod",
    resource_name: "account_info"
  },
  {
    environment: "prod",
    account_number: "249922119495",
    regions: [
      {
        region_one: "10.97.248.0/21",
        region_three: "10.62.56.0/21"
      }
    ],
    bu: "CIO and Central Tech",
    account_alias: "tr-authorities-prod",
    resource_name: "account_info"
  },
  {
    environment: "nonprod",
    account_number: "043533679309",
    regions: [
      {
        region_five: "10.60.168.0/22",
        region_four: "10.60.164.0/22",
        region_ten: "10.37.212.0/23",
        region_one: "10.37.224.0/20",
        region_seven: "10.60.160.0/24",
        region_two: "10.37.214.0/23",
        region_three: "10.60.144.0/20"
      }
    ],
    bu: "corporate",
    account_alias: "tr-tax-proflgcy1-nonprod",
    resource_name: "account_info"
  },
]

这是我的代码，我必须在其中显示表中的数据。

import React, { Component } from "react";
import $ from "jquery";
import "./../css/index.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import details from '../data';

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { //state is by default an object
      accounts : details
   }
  }
  renderTableData() {
    return this.state.accounts.map((account, index) => {
       const { environment, account_number,regions,bu,account_alias,resource_name } = account; //destructuring
       return (
          <tr key={index}>
             <td className="fixed-side">{account_number}</td>
             <td>{account_alias}</td>
             <td>{bu}</td>
             <td>{account_alias}</td>
             <td>{environment}</td>
              <td>{regions}</td>
          </tr>
       )
    })
  }
  render() {
    return (
      <div className="wrapper">
        <div id="table-scroll" className="table-scroll">
          <div className="table-fixed-right table-wrap">
            <table className="main-table">
              <thead>
                <tr>
                  <th className="fixed-side" scope="col">Account Number</th>
                  <th scope="col">Account Alias</th>
                  <th scope="col">us-east-2</th>
                  <th scope="col">us-east-1</th>
                  <th scope="col">us-gov-west-1</th>
                  <th scope="col">us-gov-east-1</th>
                </tr>
              </thead>
          <tbody>
            {this.renderTableData()}
          </tbody>
        </table>
      </div>
    </div>
    </div>
    );
  }
}

export default Table;

当我试图遍历数据并破坏元素时，当我试图显示出现错误的元素时

错误：对象作为React子对象无效（找到：带有键的对象 {region_one}）。如果您打算渲染儿童集合，请使用而不是数组。

任何人都可以帮助我

Answer 1

您会收到错误消息，因为详细信息的每个元素都包含一个按区域名称嵌套的对象数组。您可以做的是在regions数组中删除“ {”和“}”，然后在渲染时将其称为简单数组

Answer 2

您不能在Javascript内部拥有javascript数组/对象或任何东西（没有标签）。您可以执行以上Willy Wonka所说的。只需将对象的值放在

数组中即可

['172.31.0.0/16','172.30.0.0/16']

或者只是将一个对象作为区域的值

  {
    region_one: "172.31.0.0/16",
    region_three: "172.30.0.0/16"
  }

您可以通过

遍历对象中的区域。

let regionString = ''
for(let region in regions){
    regionString+ = region + ' ' 
}

然后，您可以拥有一个字符串，在该字符串中，您可以像这样将字符串放入{regionString}中。希望你明白了：）

如何在对象内部显示数组元素

2 个答案: