如何使用来自http get in的数据进行动态菜单反应？

Question

我正在使用axios来获取发送给我的URL：

{
  "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个选项，那么如何在不知道我将在该对象中拥有多少个itens的情况下呈现它呢？ 我已经尝试过.map，但这是一个内部带有数组的对象，而map对此无效。 我追求的解决方案是可以遍历数组并呈现菜单的东西。 我对这款axios感到不知所措。

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>);