Select2 не обновляется при изменении массива данных - PullRequest
Новая
       6

Select2 не обновляется при изменении массива данных

0 голосов
/ 27 февраля 2019

Я использую response-select2-wrapper , который имеет ту же функциональность, что и select2.

Я пытаюсь изменить Все на любой текст, выбранный basisList.Я могу корректно обновить его до Users (ID) , используя componentWillMount().

Моя проблема в том, если я изменю basisList, который выбран, на machines, который вызывает this.updateResolutionText() не вызывает select2 для повторного рендеринга. Я вижу, что мое состояние обновлено правильно, однако select2 не обновляется.

Чего мне не хватает?Я думаю, что при обновлении this.state.resolutionOptions мой компонент select2 будет автоматически обновляться, отображая новый текст. 

this.state = {
    resolutionOptions: [
        { text: 'All', id: 0, value: 'all' },
        { text: 'Month', id: 1, value: 'Monthly' },
        { text: 'Day', id: 2, value: 'day' },
        { text: 'Day-Hour', id: 3, value: 'Day-Hour' },
        { text: 'Hourly (0-23)', id: 4, value: 'hourly' },
        { text: 'Day of Week', id: 5, value: 'dow' }
    ]
}

componentWillMount() {
    this.updateResolutionText()
}

componentDidUpdate() {
    // this returns correctly {text: 'Machines', id: 0, value: 'all'}
    console.log(this.state.resolutionOptions[0]);
}

updateResolutionText() {
    let basisList = [
        {text: 'Users (ID)', id: 0, value: 'users'},
        {text: 'Machines', id: 1, value: 'machines'}
    ];
    let options = this.state.resolutionOptions;
    let comparison = 'users';

    if(basisList) {
        for(let i = 0; i < basisList.length; i++) {
            if(basisList[i].value === comparison) {
                options[0].text = basisList[i].text
                break;
            }
        }
    }

    this.setState({ resolutionOptions: options });
}

<Select2 className="form-control"
         ref="resolution"
         data={this.state.resolutionOptions}
         defaultValue={0}>

1 Ответ

0 голосов
/ 27 февраля 2019

Вы не должны обновлять состояние напрямую 

    this.state = {
    resolutionOptions: [
        { text: 'All', id: 0, value: 'all' },
        { text: 'Month', id: 1, value: 'Monthly' },
        { text: 'Day', id: 2, value: 'day' },
        { text: 'Day-Hour', id: 3, value: 'Day-Hour' },
        { text: 'Hourly (0-23)', id: 4, value: 'hourly' },
        { text: 'Day of Week', id: 5, value: 'dow' }
    ]
}

componentWillMount() {
    this.updateResolutionText()
}

componentDidUpdate() {
    // this returns correctly {text: 'Machines', id: 0, value: 'all'}
    console.log(this.state.resolutionOptions[0]);
}

updateResolutionText() {
    let basisList = [
        {text: 'Users (ID)', id: 0, value: 'users'},
        {text: 'Machines', id: 1, value: 'machines'}
    ];
    let options = [...this.state.resolutionOptions];
    let comparison = 'users';

    if(basisList) {
        for(let i = 0; i < basisList.length; i++) {
            if(basisList[i].value === comparison) {
                options[0].text = basisList[i].text // HERE
                break;
            }
        }
    }

    this.setState({ resolutionOptions: options });
}

<Select2 className="form-control"
         ref="resolution"
         data={this.state.resolutionOptions}
         defaultValue={0}>

Эта строка: 

options[0].text = basisList[i].text // HERE

, чтобы вы могли избежать этого при создании нового объекта 

let options = [...this.state.resolutionOptions];
...