反应选择的上升错误

我正在使用React selected(https://github.com/chenglou/react-chosen，jQuery Chosen插件的React包装器，https://harvesthq.github.io/chosen/)。我遇到多选元素的问题。

如果我这样做（在React.createClass调用中）：

    loadDataFromServer: function() {
        $.ajax({
            url: '/api/users/',
            dataType: 'json',
            success: function(data) {
                for (var i = 0; i < data.length; i++) {
                    var option = data[i];
                    var val = [option.id];
                    this.state.options.push(
                        <option key={i} value={val}>{option.name}</option>
                    );
                }
            }.bind(this),
            error: function(xhr, status, err) {
                console.error(this.props.url, status, err.toString());
            }.bind(this)
        });
    },
    getInitialState: function() {
        return {data: [], options: []};
    },
    componentDidMount: function() {
        this.loadDataFromServer();
    },
    render: function () {
        return (
            <form className="well base_well new_task_well" onSubmit={this.handleSubmit}>
                <Chosen width="300px" data-placeholder="Select..." multiple>
                    {this.state.options}
                </Chosen>
                <button type="button" className="btn add_button"  id="add_new_task_btn" type="submit">Add</button>
            </form>
         )
     }

然后一切都很好（我基本上对API进行AJAX调用，并根据结果构建一个下拉选择列表，其中可能包含多个值）。

但是，为了减少代码大小，我想将选择列表构建为一个单独的组件，如下所述https://stackoverflow.com/a/25818571/2486678

我构建的组件是这样的：

var multipleSelect = React.createClass({
    propTypes: {
        url: React.PropTypes.string.isRequired
    },
    getInitialState: function() {
        return {
            options: []
        }
    },
    componentDidMount: function() {
        $.ajax({
            url: this.props.url,
            success: this.successHandler
        })
    },
    successHandler: function(data) {
        for (var i = 0; i < data.length; i++) {
            var option = data[i];
            this.state.options.push(
                <option key={i} value={option.value}>{option.name}</option>
            );
        }
    },
    render: function() {
       return this.transferPropsTo(
            <Chosen width="300px" data-placeholder="Select..." multiple>
                {this.state.options}
            </Chosen>
       )
   }
});

然后，在父组件的render方法中，我将multipleSelect组件"插入"到一个表单中：

<multipleSelect url="/api/places"
    value={this.state.place_childSelectValue} onChange={this.place_changeHandler}
/>

虽然这对于只有一个可能值的Chosen元素（没有传递multiple道具）来说很好，但如果我对具有多个可能的值的列表尝试这种方法，我会得到以下错误：

"警告：如果multiple为true，则提供给<select>的value道具必须是数组。请检查Chosen的渲染方法。"

任何关于为什么会发生这种情况的想法>