如何從json對象創建下拉列表？

我在這裏做錯了什麼？（可能是一切）。我想'富'作爲選擇和值被選爲1時出現。我得到的錯誤是'對象作爲React孩子無效'。如何從json對象創建下拉列表？

constructor(props) { 
    this.state = {options: {name: 'foo', value: 1}}; 
    } 

render() { 
    return (
     <div> 
      <select>{this.state.options}</select> 
     </div> 
    ); 
}

來源

2016-12-20 nikotromus

選項是否爲'{name，value}'對象的數組？不太確定當前數據結構如何轉換爲選項 –

首先，我想你會希望你的選項是一個對象數組。然後在你的渲染功能，做這樣的事情：

constructor(props) { 
    super(props); 
    this.state = {options:[{name: 'foo', value: 1}]}; 
} 
render() { 
    return <div> 
    <select>{this.state.options.map(function(item) { 
     return <option value={item.value}>{item.name}</option>; 
    })}</select></div> 
}

來源

2016-12-20 19:23:15

使選項成爲對象數組並實現您的代碼。它不再爆炸，但是清單是空的。 – nikotromus

確實看起來像它*應該*工作，雖然... ;-) – nikotromus

您的構造函數是這樣嗎？：構造函數（道具）{this.state = {options：[{name：'foo'，value： 1}]}; } –

#1:你絕對不需要存儲在組件的state這些選項。

#2:用數組替換你的對象並使用Array#map來渲染每個選項。

render() { 
    const options = [{ name: 'foo', value: 1 }] 
    return (
    <select> 
     {options.map(option => 
     <option value={option.value}>{option.name}</option> 
    )} 
    </select> 
) 
}

來源

2016-12-20 19:55:46

偉大的建議！我不需要將這些值存儲在一個狀態中。 – nikotromus

如何從json對象創建下拉列表？

回答

相關問題