Question

我正在使用axios来获取我的URL中的get：

{
  "companies": [
    {
      "id": 1,
      "description": "Fernando"
    },
    {
      "id": 2,
      "description": "Paulo"
    },
    {
      "id": 3,
      "description": "Junior"
    },
    {
      "id": 4,
      "description": "Lucio"
    }
  ]
}

我的axios代码如下所示：

axios.get("MY URL").then((response) => {
this.setState({
      data: response.data.companies
    });
      data = response.data
  console.log(response.data)
  console.log("data change",this.state.data)

})

我可以在我的状态或var中获取我需要的对象，这是在控制台中显示的内容，似乎对象是正确的：

(4) [{…}, {…}, {…}, {…}]
0
:
{id: 1, description: "Fernando"}
1
:
{id: 2, description: "Paulo"}
2
:
{id: 3, description: "Junior"}
3
:
{id: 4, description: "Lucio"}
length
:
4
__proto__
:
Array(0)

现在我需要创建一个菜单来渲染我在我的对象中有4个选项，所以如何在不知道我将在这个对象中有多少个的情况下渲染它？我已经尝试过.map但是这是一个内部有数组的对象，而map不适用于此。我之后的解决方案可以迭代数组并呈现菜单。我对这种公寓感到很沮丧。

Answer 1

以下内容将为您的数据数组生成N个div元素：

var items = Array.from({length: $this.state.data.length}, (_, i) => i)
     .map(i => <div key={"item" + i}>{$this.state.data[i]}</div>);

如何使用来自http的数据制作动态菜单？

1 个答案: