Question

我使用的react-select2-wrapper具有与select2相同的功能。

我正尝试将全部更改为所选basisList的文本。我可以使用componentWillMount()将其正确更新为用户（ID）。

我的问题是，如果我将选择的basisList更改为调用machines的{{1}}，不会导致select2重新呈现。 我可以看到我的状态已正确更新，但是select2没有更新。

我想念什么？我认为通过更新this.updateResolutionText()，我的select2组件将自动更新，从而显示新文本。

this.state.resolutionOptions

Answer 1

您不应该直接更新状态

    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];

当数据数组更改时，Select2不更新

1 个答案: