从处于状态的对象数组中渲染 React 组件答案

【问题标题】：Rendering React Components from Array of Objects in state从处于状态的对象数组中渲染 React 组件
【发布时间】：2018-02-21 19:26:53
【问题描述】：

我的this.state.data 中有这样的对象：

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

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

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

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

PS：我正在将内容设置为状态，因为我可以随时更改它。

【问题讨论】：

【解决方案1】：

您是否只想动态添加description？

你可以的

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

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

我不确定value 属性需要什么，但可以以相同的方式动态更改

【讨论】：

我在 render 方法中这样做？
你可以，如果你用{ }包装它，或者你可以写一个函数来完成它，并在渲染方法中调用该函数。 <Menu>{this.generateMenuItems()</Menu>

【解决方案2】：

在渲染方法内部，

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

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

【讨论】：