如何更新 react select 或 react-select.async 中的选项列表

Question

我正在尝试更新在别处触发的事件的选项列表。我已经保存了状态中的选项，当我有更新的列表时，我 setState 会触发渲染，但选择框不显示更新的列表

    constructor(props) {
        super(props);
        this.renderSelectField = this.renderSelectField.bind(this);
        this.renderTextField = this.renderTextField.bind(this);
        this.updateCommsMatrix = this.updateCommsMatrix.bind(this);
        this.renderSelect2Field = this.renderSelect2Field.bind(this);
        this.clearValue = this.clearValue.bind(this);
        this.updateValue = this.updateValue.bind(this);
        this.meta = {
            title: 'Request Exemption',
            description: 'This section allows you to request an exemption'
        };
        this.runOnce = false;
        this.state = {
            loaded: false,
            searchable: true,
            selectValue: 0,
            clearable: true,
            rtl: false,
            options: [
                { value: 0, label: 'All'}
                ]
        };
        this.exemptionType = {};
        this.markets = {};
        this.serviceDomain = {};
        this.servicesList = {};
        this.matrices = {};
    }

本节获取要在选择中设置的更新选项

    updateCommsMatrix(service_id){      

        if(service_id > 0){
            let self = this;
            this.props.fetchCommsmatricesByService(service_id)
            .then( response => {
                let data = response.payload.data.body.recordset.record;
                console.log(data);
                let options = self.populateOptionsObject(data, 'id', 'filename');
                options.unshift({ value: 0, label: 'All'});
                return options;
            })
            .then( options => this.setState({options:options}));
        }else{
            //select.append(<option value="0" key="0">All</option>);
        }
    }

    populateOptionsObject(options, key, value) {
        return options.map((option, index) => (
                {value : option[key], label: option[value] }
        ));
    }

下面是呈现表单的部分

    populateOptions(options, key, value) {
        return options.map((option, index) => (
            <option key={option.id} value={option[key]}>
                {option[value]}
            </option>
        ));
    }

    clearValue (e) {
        this.select.setInputValue('');
    }

    updateValue (newValue) {
        this.setState({
            selectValue: newValue,
        });
    }

    renderSelect2Field(field){
        let id = "select_" + field.input.name;
        let options = this.state.options;
        return(
                <div className="form-group">
                    <label className="control-label col-sm-2">{field.label}</label>
                    <div className="col-sm-4">
                        <Select
                            id={id}
                            //className="col-sm-6"
                            ref={(ref) => { this.select = ref; }}
                            onBlurResetsInput={false}
                            onSelectResetsInput={false}
                            autoFocus
                            options={options} //on load this has 1 value (value=0, display text =All)
                            simpleValue
                            clearable={this.state.clearable}
                            name={field.input.name}
                            //disabled={this.state.disabled}
                            value={this.state.selectValue}
                            onChange={this.updateValue}
                            rtl={this.state.rtl}
                            searchable={this.state.searchable}
                        />
                    </div>
                </div>
        );
    }

    render() {
        console.log(this);
        if (!this.runOnce && this.props.isReady) {
            this.runOnce = true;
            this.initData();
        }
        const { handleSubmit } = this.props;
        let form = 'Loading...';
        if (this.state.loaded) {
            return (
                <div className="container-fluid">
                    <form onSubmit={handleSubmit} className="form-horizontal">
                        <Field
                            label="Comms Matrix"
                            loadFrom="matrices"
                            name="comms_matrix_id"
                            component={this.renderSelect2Field}
                            type="select"
                        />
                        <button
                            type="submit"
                            className="btn btn-vodafone hidden-print"
                        >
                            Submit
                        </button>
                    </form>
                </div>
            );
        }

        return <div className="container-fluid">{form}</div>;
    }
}

我可以使用单个选项在 init 加载时加载选择框。我想使用添加/更改选项列表updateCommsMatrix，您可以看到我正在设置选择中使用的状态。

我也尝试过Async选项，但我似乎无法让显示器显示选定的值，当我单击下拉列表时，它不会显示新列表，直到我点击spacebar。使用这种方法，我将存储object在this.state.selectValue我从这里获取的示例中

异步

   <Async 
                            name={field.input.name}
                            multi={false} 
                            value={this.state.selectValue} 
                            onChange={this.updateValue} 
                            valueKey="value" 
                            labelKey="label" 
                            loadOptions={this.getCommsmatrices} 
                            onValueClick={this.gotoCommsmatrix}
                            cache={false}
                            isLoading={this.state.isLoading}
                        />



 getCommsmatrices (input, callback) {
        input = input.toLowerCase();
        let options = this.state.options.filter(i => {
            return i.label.toLowerCase().includes(input) == true;
            //return i.label.toLowerCase().substr(0, input.length) === input;
        });

        let data = {
            options: options,//.slice(0, MAX_CONTRIBUTORS),
            complete: true //options.length <= MAX_CONTRIBUTORS,
        };

        setTimeout(function() {
            callback(null, data);
        }, ASYNC_DELAY);
    }

    gotoCommsmatrix (value, event) {
        if(value.value > 0){
            window.open(window.top.protocol + '://' + window.top.hostname + '/api/user/commsmatrix/id/'+value.value+'/format/xml');
        }
    }

在我看来，当我选择一个值时，传入的输入loadOptions是空白的