從處於狀態的對象數組渲染 React 組件

Question

我的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：我將內容設置為狀態，因為我可以隨時更改它。

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