1

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

問題: console.log(name)私handleOptions()の場合、for ループの最初の項目のみをログに記録しています。

質問:tagsコレクションからオブジェクトの配列を のように返す方法this.state.optionsはstaticOptions?

//-------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);
4

1 に答える 1

0

まず、props のデータを componentDidMount() または (props が新しい props で更新されている場合は 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>
  );
}
于 2016-09-27T15:00:09.973 に答える