Автозаполнение - MaterialUI - Контролируемый компонент не работает

Question

По сути, я создал компонент автозаполнения и установил значение по умолчанию в качестве моего состояния this.state.quest.ansType, но когда я изменяю это состояние, компонент выдает ошибку: компонент меняет состояние значения по умолчанию неконтролируемого автозаполнения после того, как инициализируется. Чтобы подавить это предупреждение, выберите контролируемое автозаполнение.

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

const ansTypes = [
    {
        id: 'T',
        desc: "Texto"
    },
    {
        id: 'M',
        desc: "Multipla Escolha"
    },
    {
        id: 'U',
        desc: "Escolha Única"
    },
];

<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    disableCloseOnSelect
    onChange={obj => this.selectAnsType(obj)}
    defaultValue={this.state.quest.ansType}
    getOptionLabel={option => option.desc}
    renderOption={(option, { selected }) => (
        <React.Fragment>
            <Checkbox
                style={{ marginRight: 8 }}
                checked={selected}
                color={"primary"}
            />
            {option.desc}
        </React.Fragment>
    )}
    renderInput={(params) => (<TextField {...params} label={"Answer Type"} />)}
/>

Answer 1

По сути, вы меняли значение по умолчанию после первого рендеринга, что не должно происходить. Либо вы используете неконтролируемый компонент (-onChange, -value, + defaultValue, + ref), либо вы используете контролируемый компонент (+ onChange, + value, -defaultValue, ref-> только при необходимости). DefaultValue следует использовать для неуправляемых!

Controlled

...


<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    ...
    onChange={obj => this.selectAnsType(obj)}
    value={this.state.quest.ansType}
    ...
/>

Неуправляемый

...
defaultAnsType={...};

myUncontrolledAutocomplete=React.createRef();

<Autocomplete className="cb" id={"ansType"} options={ansTypes}
    ...
    defaultValue={this.defaultAnsType}
    ref={this.myUncontrolledAutocomplete}
    ...
/>

$

Личное мнение

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