1

我正在使用 react-select 来收集在名为 的 mongodb 集合中定义的标签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() 或（componentWillReceiveProps() 如果 props 正在使用新的 props 更新）中的状态，并直接将选项传递给选择框。在 handleOptions() 中这样做不是一个好主意。

其次，我认为 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 回答