Javascript 反应JS树视图以显示api响应

在我的react应用程序中，我实现了一个树视图结构，以更可读的格式显示api响应。我正在使用树视图引导

import React from 'react';
import ReactDOM from 'react-dom';
import TreeView from 'treeview-react-bootstrap'

class Example extends React.Component {
    constructor(){
        super();
        // SET YOUR DATA
        this.state = {
            data: [
                {
                    text: "John Peter",
                    nodes: [
                      {
                        text: "ID: 11111",
                        nodes: [
                          {
                            text: "VIN"
                          },
                          {
                            text: "Policy Effective Date"
                          },
                          {
                            text: "Policy Expiration Date"
                          },
                          {
                            text: "Vehicle Make"
                          },
                          {
                            text: "Vehicle Model"
                          }
                        ]
                      },
                      {
                        text: "ID: 123456",
                        nodes: [
                            {
                              text: "VIN"
                            },
                            {
                              text: "Policy Effective Date"
                            },
                            {
                              text: "Policy Expiration Date"
                            },
                            {
                              text: "Vehicle Make"
                            },
                            {
                              text: "Vehicle Model"
                            }
                          ]
                      }
                    ]
                  },
                  {
                    text: "Scott Brown"
                  }
            ]
        }

    }

    render(){
        return (
            // RENDER THE COMPONENT
            <TreeView data={this.state.data} />
        );
    }
}

export default Example

如果您看到响应，我希望我的键值以树状结构打印

是否有一种方法可以呈现此响应以适应treeview react引导

---

我不确定我是否需要在我的渲染方法中使用map函数来迭代和显示数据，以及它将如何工作。有人能告诉我我是否做得对，或者有更好的方法吗。提前感谢。

您可以将响应转换为以下内容。我们刚刚添加了一个虚拟响应。请检查以下代码，并让我知道这是否有帮助：

import React from "react";
import ReactDOM from "react-dom";
import TreeView from "treeview-react-bootstrap";
import axios from "axios";

class Example extends React.Component {
    constructor() {
        super();
        // SET YOUR DATA
        this.state = {
            data: []
        };
    }
    componentDidMount() {
        axios
            .get("https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
            .then(data => {
                let transformedData = data.data.map(d => {
                    return {
                        text: d.text,
                        nodes: [
                            {
                                text: "dummy 1",
                                nodes: []
                            }
                        ]
                    };
                });
                this.setState({ data: transformedData });
            });
    }

    render() {
        return (
            // RENDER THE COMPONENT
            <TreeView data={this.state.data} />
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("app"));

从“React”导入React；
从“react dom”导入react dom；
从“TreeView react bootstrap”导入TreeView；
从“axios”导入axios；
类示例扩展了React.Component{
构造函数（）{
超级（）；
//设置数据
此.state={
数据：[]
};
}
componentDidMount（）{
axios
.get（“https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
。然后（数据=>{
让transformedData=data.data.map（d=>{
返回{
文本：d.text，
节点：[
{
文字：“虚拟1”，
节点：[]
}
]
};
});
this.setState（{data:transformedData}）；
});
}
render（）{
返回(
//渲染组件
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

---

您也可以在这里看到它的作用：

您可以像这样转换响应。我们刚刚添加了一个虚拟响应。请检查以下代码，并让我知道这是否有帮助：

import React from "react";
import ReactDOM from "react-dom";
import TreeView from "treeview-react-bootstrap";
import axios from "axios";

class Example extends React.Component {
    constructor() {
        super();
        // SET YOUR DATA
        this.state = {
            data: []
        };
    }
    componentDidMount() {
        axios
            .get("https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
            .then(data => {
                let transformedData = data.data.map(d => {
                    return {
                        text: d.text,
                        nodes: [
                            {
                                text: "dummy 1",
                                nodes: []
                            }
                        ]
                    };
                });
                this.setState({ data: transformedData });
            });
    }

    render() {
        return (
            // RENDER THE COMPONENT
            <TreeView data={this.state.data} />
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("app"));

从“React”导入React；
从“react dom”导入react dom；
从“TreeView react bootstrap”导入TreeView；
从“axios”导入axios；
类示例扩展了React.Component{
构造函数（）{
超级（）；
//设置数据
此.state={
数据：[]
};
}
componentDidMount（）{
axios
.get（“https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
。然后（数据=>{
让transformedData=data.data.map（d=>{
返回{
文本：d.text，
节点：[
{
文字：“虚拟1”，
节点：[]
}
]
};
});
this.setState（{data:transformedData}）；
});
}
render（）{
返回(
//渲染组件
);
}
}
ReactDOM.render（，document.getElementById（“app”）；

---

您还可以在这里看到它的作用：

在api响应中，您需要在数组元素之间建立关系。如何确定？我只是尝试选取要以这种格式显示的键和值。因此有两个属性，即id，我将其作为父节点，并添加一些其他属性作为其子节点。这就是我的想法，但不确定我是否可以在不更改后端的情况下实现这一点。您可以在componentDidMount中使用axion进行Ajax调用，一旦得到响应，就可以将响应设置为此状态。是的，但如何以上述格式呈现响应？您可以从服务器转换响应，然后设置状态。如果您可以共享来自服务器的示例响应，那么我可以提供更多帮助。在api响应中，您需要在数组元素之间建立关系。如何确定？我只是尝试选取要以这种格式显示的键和值。因此有两个属性，即id，我将其作为父节点，并添加一些其他属性作为其子节点。这就是我的想法，但不确定我是否可以在不更改后端的情况下实现这一点。您可以在componentDidMount中使用axion进行Ajax调用，一旦得到响应，就可以将响应设置为此状态。是的，但如何以上述格式呈现响应？您可以从服务器转换响应，然后设置状态。如果您可以共享来自服务器的响应示例，那么我可以提供更多帮助。