从状态

Question

我的this.state.data：

中有这样的对象

{
  "companies": [
    {
      "id": 1,
      "description": "Fernando"
    },
    {
      "id": 2,
      "description": "Paulo"
    }
  ]
}

我从网址中的get方法获取此对象，并将其设置为this.state.data。 我想使用选项作为数组的描述来呈现我的菜单，如下所示：

 <MenuItem value={10} >Fernando</MenuItem>
 <MenuItem value={20}>Paulo</MenuItem>

但是我想让它动态渲染，有时我会收到一个包含10个id和描述的数组，所以我需要在菜单中渲染10个选项。 我已经尝试绘制对象，但我仍然坚持这一点。

PS：我在一个州设置内容，因为我可以随时更改它。

Answer 1

您是否只想动态添加description？

你可以做到

this.state.data.companies.map(company => (
   <MenuItem key={company.id}>{company.description}</MenuItem>
))

这将返回数组中每个项目的MenuItem

我不确定value道具需要什么，但可以同样方式动态更改

Answer 2

在render方法中，

{this.state.data.companies.map((company) => {
   <MenuItem id={company.id} key={company.id} description={company.description}/>
})}

然后使用MenuItem组件中的公司描述作为this.props.description