Как обновить список опций в реагировать на выбор или реагировать-выбрать.async

Question

Я пытаюсь обновить список параметров события, вызванного в другом месте. Я сохранил параметры в состоянии, и когда у меня есть обновленный список, я устанавливаю состояние, которое запускает рендеринг, но в окне выбора не отображается обновленный список.

    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 пусто

Answer 1

Код с моей точки зрения очень сложен, хотя быть не должно. Если вы используете переменную свойства компонента, которая является массивом, и вы будете отображать все параметры на основе этой переменной вreact-select, он будет работать, так как изменение свойств приведет к повторному рендерингу компонента и изменению параметров реакции-выбора.

Пример не для реакции-выбора, но тоже подойдет.