流星を使って反応すると、コレクションからオブジェクトの配列を返す方法は？

Question

私はと呼ばれるmongodbコレクションに定義されたタグを収集するためにreact-selectを使用しています。と同じように配列options[]の状態でタグを挿入する必要があります。

issue：console.log(name)私のhandleOptions()は、forループの最初の項目のみを記録しています。

質問：ちょうどstaticOptionsようになりthis.state.optionsにtagsコレクションからオブジェクトの配列を返すためにどのように？

//-------create class: Addgifts----- 
export default class Addgifts extends Component{ 
constructor(){ 
super() 
this.state={ 
    value: [], 
    options: [], 
    staticOptions: [{ label: 'Chocolate', value: 'chocolate' }, 
      { label: 'Vanilla', value: 'vanilla' }, 
      { label: 'Strawberry', value: 'strawberry' }, 
      ] 
} 
} 

//-------Handle options-------- 
handleOptions(){ 
let KeyWords = this.props.tags; 
for (i=0 ; i<KeyWords.length ; i++){ 
    return KeyWords[i].map.name((names)=>{ 
    console.log(name); 
    return(
     this.state.options.push({label:{name},value:{name}}); 
    ) 
    } 
    }); 
} 
} 

//-----Select Change---- 
handleSelectChange (value) { 
    console.log('You\'ve selected:', value); 
this.setState({ 
    value 
}); 
} 

//-----Select package---- 
<div> 
<Select 
multi={true} 
value={this.state.value} 
placeholder="Select all KeyWord(s)" 
options={this.handleOptions()} 
onChange={this.handleSelectChange.bind(this)} /> 
</div> 

//-----subscribing tags from mongodb---- 
Addgifts.propTypes={tags: PropTypes.array.isRequired,}; 
export default createContainer(()=>{ 
Meteor.subscribe('tags'); 
return {gifts: Gifts.find({},{sort:{name:-1}}).fetch(),}; 
},Addgifts); 

Answer 1

まず、あなたはcomponentDidMount（）または（componentWillReceiveProps（）小道具は、新しい小道具で更新取得している場合）状態と直接選択ボックスにオプションを渡すために小道具でデータを転送する必要があります。 handleOptions（）でそれを行うのは良い考えではありません。

第2に、handleOptions内のロジックが、オブジェクトの配列を反復処理するのは正しくないと思います。

このようなことをします。

componentDidMount: function() { 
    var options = []; 
    for (i=0 ; i<this.props.tags.length ; i++){ 
    var name = this.props.tags[i].name; 
    console.log(name); 
    options.push({label:name, value: name}); 
    } 
    this.setState({options: options}); 
}, 

render: function() { 
    return (
    <div> 
     <Select 
     multi={true} 
     value={this.state.value} 
     placeholder="Select all KeyWord(s)" 
     options={this.state.options} 
     onChange={this.handleSelectChange.bind(this)} /> 
    </div> 
); 
}