jsonオブジェクトからドロップダウンリストを作成する方法は？

Question

ここで何が間違っていますか？ （おそらくすべて）。私は 'foo'を選択肢として選択し、値が1になるようにしたいと思います。私が得るエラーは、 'オブジェクトはリアクションの子としては有効ではありません'です。

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

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

Answer 1

まず、オプションをオブジェクトの配列にしたいと思います。次に、あなたのレンダリング機能では、このような何かを：

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> 
} 

Answer 2

#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> 
) 
}