如何将对象数组映射到响应中的表中？

Question

我的MongoDB中有一个对象数组，我想将它映射到React中的一个表。我试过了，但它在浏览器控制台中给出了未定义的内容，而不是映射。当我对vm进行console.log时，它提供了以下数据：

你怎么能帮我？

    [
         {
              "Virtual_Machines": {
                   "Debian": {
                        "VM_Name": "Debian",
                        "VM_Location": "eastus",
                        "VM_Disk_Name": "Debian_OsDisk_1_b890f5f5c42647549c881c0706b85201",
                        "VM_Publisher_Info": {
                             "publisher": "debian",
                             "offer": "debian-11",
                             "sku": "11-gen2",
                             "version": "latest"
                        },
                        "Vm_Disk_Type": "Standard_D2s_v3",
                        "VM_Encryption": null
                   },
                   "Ubuntu": {
                        "VM_Name": "Ubuntu",
                        "VM_Location": "eastus",
                        "VM_Disk_Name": "Ubuntu_disk1_0610e0fde49b481490ef0a069a03b460",
                        "VM_Publisher_Info": {
                             "publisher": "canonical",
                             "offer": "0001-com-ubuntu-server-focal",
                             "sku": "20_04-lts-gen2",
                             "version": "latest"
                        },
                        "Vm_Disk_Type": "Standard_D2s_v3",
                        "VM_Encryption": null
                   }
              }
         },]


    <table className="audit table">
                <thead className="table-th">
                  <tr>
                    <th>Name</th>
                    <th>Location</th>
                    <th>Encryption</th>
                  </tr>
                </thead>
                <tbody className="table-body">
                  {vm.map((x) => (
                    <tr>
                      <td>{x.Virtual_Machines}</td>
                      <td>{x.VM_Location}</td>
                      <td>{x.VM_Encryption}</td>
                    </tr>
                  ))}
                </tbody>
              </table>

Answer 1

请将此部分更改如下

vm.map(x => x.Virtual_Machines).map(y => (
  <tr>
    <td>{x.VM_Name}</td>
    <td>{x.VM_Location}</td>
    <td>{x.VM_Encryption}</td>
  </tr>
));

Answer 2

您的映射是错误的，您的JSON中有四个级别/嵌套，包括Virtual_Machines、机器类型、机器属性和VM_Publisher_Info。您将Virtual_Machines与机器属性(VM_Location、VM_Encryption)混合使用，这是错误的。

类似的情况是：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";
const data = [
  {
    name: "Jude",
    position: "Developer",
    experiences: [
      {
        id: 0,
        job: "React UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components"
      },
      {
        id: 1,
        job: "React/ Redux UI Developer",
        period: "2017-2018",
        description:
          "I love Creating beautiful Smart UI with React js and styled components"
      }
    ]
  }
];

class App extends React.Component {
  state = {
    data: []
  };
  componentDidMount() {
    console.log(data);
    this.setState({ data });
  }
  render() {
    const { data } = this.state;
    const resume = data.map(dataIn => {
      return (
        <div key={dataIn.name}>
          {dataIn.name}
          <ul>
            {dataIn.experiences.map(experience => (
              <li key={experience.id}>{experience.job}</li>
            ))}
          </ul>
          {dataIn.position}
        </div>
      );
    });

    return <div>{<React.Fragment>{resume}</React.Fragment>}</div>;
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在React js中从json映射嵌套数组